我如何确保所有框保持相同的大小，无论其中有多少文本

Question

我有一些引导卡片盒，它们具有不同大小的文本，将存储在每个卡片盒中。 我想确保无论数量多少，盒子都会保持相同的高度。 在这种情况下，也许应该只显示 x 行，这很好，只是想确保框本身的高度一致，因为如果不是，这会弄乱整个页面。 这些是引导 3 盒。

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> <div class="container"> <div class="col-sm-4" v-for="(card, index) in cards"> <div v-if="canDisplay(index)" class="thumbnail"> <div class="caption text-center" onclick=""> <div class="position-relative"> <div v-html="getImage(card)"> </div> </div> <h4 id="thumbnail-label" v-html="getTextLinkUrl(card)"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> Testing </h4> <div class="thumbnail-description smaller" v-html="card.description"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="caption card-footer text-center"> <ul class="list-inline"> <li> <button @click="edit(index)"><i class="glyphicon glyphicon-pencil lighter"></i>&nbsp;Edit</button> </li> <li> <button @click="remove(index)"><i class="glyphicon glyphicon-trash lighter"></i>&nbsp;Remove</button> </li> </ul> </div> </div> </div> <div class="col-sm-4" v-for="(card, index) in cards"> <div v-if="canDisplay(index)" class="thumbnail"> <div class="caption text-center" onclick=""> <div class="position-relative"> <div v-html="getImage(card)"> </div> </div> <h4 id="thumbnail-label" v-html="getTextLinkUrl(card)"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> Testing </h4> <div class="thumbnail-description smaller" v-html="card.description"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum non consectetur a erat nam. Massa vitae tortor condimentum lacinia quis vel. Elementum eu facilisis sed odio morbi. Tellus at urna condimentum mattis pellentesque id nibh. Et malesuada fames ac turpis egestas. Senectus et netus et malesuada. Massa enim nec dui nunc. Scelerisque in dictum non consectetur a. Vel quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Risus feugiat in ante metus dictum at tempor. Convallis convallis tellus id interdum velit. Id diam maecenas ultricies mi eget. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in. Metus aliquam eleifend mi in nulla. Accumsan lacus vel facilisis volutpat est velit egestas dui id. Nibh sit amet commodo nulla facilisi nullam vehicula. Sed id semper risus in hendrerit gravida rutrum quisque. Eget felis eget nunc lobortis. Adipiscing enim eu turpis egestas pretium. Volutpat sed cras ornare arcu. Ac tortor dignissim convallis aenean. Risus nec feugiat in fermentum posuere. Turpis tincidunt id aliquet risus feugiat in ante metus. Vitae nunc sed velit dignissim sodales ut. Tellus elementum sagittis vitae et leo duis ut diam. Nibh praesent tristique magna sit amet purus gravida quis blandit. Ornare suspendisse sed nisi lacus sed. Eu non diam phasellus vestibulum lorem. Amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Porta lorem mollis aliquam ut. Condimentum mattis pellentesque id nibh. Ipsum suspendisse ultrices gravida dictum. Consequat semper viverra nam libero justo laoreet sit. Nunc non blandit massa enim nec dui nunc mattis enim. Ut porttitor leo a diam sollicitudin tempor id. Eget mauris pharetra et ultrices neque ornare aenean. Eu sem integer vitae justo eget magna. Vitae tempus quam pellentesque nec nam aliquam sem et. Aliquet enim tortor at auctor. Nisl nisi scelerisque eu ultrices vitae auctor eu. Fames ac turpis egestas integer eget. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Dictum varius duis at consectetur lorem. Scelerisque felis imperdiet proin fermentum leo. Id aliquet lectus proin nibh. Diam maecenas ultricies mi eget mauris pharetra. Vulputate enim nulla aliquet porttitor. Dictum sit amet justo donec. </div> <div class="caption card-footer text-center"> <ul class="list-inline"> <li> <button @click="edit(index)"><i class="glyphicon glyphicon-pencil lighter"></i>&nbsp;Edit</button> </li> <li> <button @click="remove(index)"><i class="glyphicon glyphicon-trash lighter"></i>&nbsp;Remove</button> </li> </ul> </div> </div> </div> <div class="col-sm-4" v-for="(card, index) in cards"> <div v-if="canDisplay(index)" class="thumbnail"> <div class="caption text-center" onclick=""> <div class="position-relative"> <div v-html="getImage(card)"> </div> </div> <h4 id="thumbnail-label" v-html="getTextLinkUrl(card)"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> Testing </h4> <div class="thumbnail-description smaller" v-html="card.description"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div> <div class="caption card-footer text-center"> <ul class="list-inline"> <li> <button @click="edit(index)"><i class="glyphicon glyphicon-pencil lighter"></i>&nbsp;Edit</button> </li> <li> <button @click="remove(index)"><i class="glyphicon glyphicon-trash lighter"></i>&nbsp;Remove</button> </li> </ul> </div> </div> </div> </div>

Answer 1

我删除了您的关闭 div 并将您的内容移动到缩略图描述中。 添加特定高度并隐藏溢出。 希望这可以帮助你。

 .thumbnail { height: 450px; overflow: hidden; }.thumbnail-description { max-height:300px; overflow:hidden; } @media only screen and (max-width: 768px){.thumbnail { height:auto; } }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> <div class="container"> <div class="col-sm-4" v-for="(card, index) in cards"> <div v-if="canDisplay(index)" class="thumbnail"> <div class="caption text-center" onclick=""> <div class="position-relative"> <div v-html="getImage(card)"> </div> </div> <h4 id="thumbnail-label" v-html="getTextLinkUrl(card)"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> Testing </h4> <div class="thumbnail-description smaller" v-html="card.description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <div class="caption card-footer text-center"> <ul class="list-inline"> <li> <button @click="edit(index)"><i class="glyphicon glyphicon-pencil lighter"></i>&nbsp;Edit</button> </li> <li> <button @click="remove(index)"><i class="glyphicon glyphicon-trash lighter"></i>&nbsp;Remove</button> </li> </ul> </div> </div> </div> <div class="col-sm-4" v-for="(card, index) in cards"> <div v-if="canDisplay(index)" class="thumbnail"> <div class="caption text-center" onclick=""> <div class="position-relative"> <div v-html="getImage(card)"> </div> </div> <h4 id="thumbnail-label" v-html="getTextLinkUrl(card)"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> Testing </h4> <div class="thumbnail-description smaller" v-html="card.description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum non consectetur a erat nam. Massa vitae tortor condimentum lacinia quis vel. Elementum eu facilisis sed odio morbi. Tellus at urna condimentum mattis pellentesque id nibh. Et malesuada fames ac turpis egestas. Senectus et netus et malesuada. Massa enim nec dui nunc. Scelerisque in dictum non consectetur a. Vel quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Risus feugiat in ante metus dictum at tempor. Convallis convallis tellus id interdum velit. Id diam maecenas ultricies mi eget. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in. Metus aliquam eleifend mi in nulla. Accumsan lacus vel facilisis volutpat est velit egestas dui id. Nibh sit amet commodo nulla facilisi nullam vehicula. Sed id semper risus in hendrerit gravida rutrum quisque. Eget felis eget nunc lobortis. Adipiscing enim eu turpis egestas pretium. Volutpat sed cras ornare arcu. Ac tortor dignissim convallis aenean. Risus nec feugiat in fermentum posuere. Turpis tincidunt id aliquet risus feugiat in ante metus. Vitae nunc sed velit dignissim sodales ut. Tellus elementum sagittis vitae et leo duis ut diam. Nibh praesent tristique magna sit amet purus gravida quis blandit. Ornare suspendisse sed nisi lacus sed. Eu non diam phasellus vestibulum lorem. Amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Porta lorem mollis aliquam ut. Condimentum mattis pellentesque id nibh. Ipsum suspendisse ultrices gravida dictum. Consequat semper viverra nam libero justo laoreet sit. Nunc non blandit massa enim nec dui nunc mattis enim. Ut porttitor leo a diam sollicitudin tempor id. Eget mauris pharetra et ultrices neque ornare aenean. Eu sem integer vitae justo eget magna. Vitae tempus quam pellentesque nec nam aliquam sem et. Aliquet enim tortor at auctor. Nisl nisi scelerisque eu ultrices vitae auctor eu. Fames ac turpis egestas integer eget. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Dictum varius duis at consectetur lorem. Scelerisque felis imperdiet proin fermentum leo. Id aliquet lectus proin nibh. Diam maecenas ultricies mi eget mauris pharetra. Vulputate enim nulla aliquet porttitor. Dictum sit amet justo donec. </div></div> <div class="caption card-footer text-center"> <ul class="list-inline"> <li> <button @click="edit(index)"><i class="glyphicon glyphicon-pencil lighter"></i>&nbsp;Edit</button> </li> <li> <button @click="remove(index)"><i class="glyphicon glyphicon-trash lighter"></i>&nbsp;Remove</button> </li> </ul> </div> </div> </div> <div class="col-sm-4" v-for="(card, index) in cards"> <div v-if="canDisplay(index)" class="thumbnail"> <div class="caption text-center" onclick=""> <div class="position-relative"> <div v-html="getImage(card)"> </div> </div> <h4 id="thumbnail-label" v-html="getTextLinkUrl(card)"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> Testing </h4> <div class="thumbnail-description smaller" v-html="card.description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div> <div class="caption card-footer text-center"> <ul class="list-inline"> <li> <button @click="edit(index)"><i class="glyphicon glyphicon-pencil lighter"></i>&nbsp;Edit</button> </li> <li> <button @click="remove(index)"><i class="glyphicon glyphicon-trash lighter"></i>&nbsp;Remove</button> </li> </ul> </div> </div> </div> </div>