如何防止 Bootstrap 列从一个部分跳到另一部分或在彼此下面？

Question

我正在为我的项目制作推荐部分。有 4 个 div，但它们的内容不均匀，因此当我开始将屏幕的宽度拉到一起时，col-sm-6它们应该像 2-2 一样排列，但 3 号 div 跳到了div no.4，后面留一个空位，然后div no.4 跳到下面一行。我怎样才能防止他们搞砸呢？我尝试过添加max-width，但这也不起作用......

\n\n

\r\n

\r\n

.testimonial-content {\r\n  text-align: center;\r\n  margin: 15px auto 15px auto;\r\n}\r\n.testimonial-content h5 {\r\n  margin-top: 20px;\r\n}\r\n.testim-logo-container {\r\n  height: 100px;\r\n  width: 100%;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n.testimonial-logo {\r\n  max-width: 100px;\r\n}

\r\n

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">\r\n\r\n<div class="row">\r\n  <div class="testimonial-content">\r\n    <div class="col-lg-3 col-sm-6 col-xs-12">\r\n      <div class="testim-logo-container">\r\n        <img class="img-responsive testimonial-logo" src="http://placehold.it/200x50/999/000/?text=1" alt="testimonial logo">\r\n      </div>\r\n      <p>"It\'s amazing to see the progress of the students, that Laszlo and Balazs has been going through during the Multimedia Design education at the IBA."</p>\r\n      <h5>Tina \xc3\x98stergaard Fils\xc3\xb8</h5>\r\n      <h5>Visual Communication - IBA</h5>\r\n    </div>\r\n  </div>\r\n  <div class="testimonial-content">\r\n    <div class="col-lg-3 col-sm-6 col-xs-12">\r\n      <div class="testim-logo-container">\r\n        <img class="img-responsive testimonial-logo" src="http://placehold.it/200x50/6c9/000/?text=2" alt="testimonial logo">\r\n      </div>\r\n      <p>"Laszlo showed dedication and self discipline during his period with Our Daily Heroes."</p>\r\n      <h5>Gyula Vajda</h5>\r\n      <h5>CEO - Our Daily Heroes</h5>\r\n    </div>\r\n  </div>\r\n  <div class="testimonial-content">\r\n    <div class="col-lg-3 col-sm-6 col-xs-12">\r\n      <div class="testim-logo-container">\r\n        <img class="img-responsive testimonial-logo" src="http://placehold.it/200x50/c96/000/?text=3" alt="testimonial logo">\r\n      </div>\r\n      <p>"It was great to work with Balazs, easy going, enthusiastic, works fast and on a reasonable price."</p>\r\n      <h5>D\xc3\xa1niel Szil\xc3\xa1gyi</h5>\r\n      <h5>Founder - BudapestDenTrip</h5>\r\n    </div>\r\n  </div>\r\n  <div class="testimonial-content">\r\n    <div class="col-lg-3 col-sm-6 col-xs-12">\r\n      <div class="testim-logo-container">\r\n        <img class="img-responsive testimonial-logo" src="http://placehold.it/200x50/96c/000/?text=4" alt="testimonial logo">\r\n      </div>\r\n      <p>"Laszlo was a top-A intern, he took the assignments very seriously and executed them well.<br />He is enthusiastic to learn and experience new things."</p>\r\n      <h5>Bj\xc3\xb6rgvin P\xc3\xa9tur</h5>\r\n      <h5>Senior Designer - //J\xc3\x96KUL\xc3\x81</h5>\r\n    </div>\r\n  </div><!-- Testimonials end-->\r\n</div><!-- Testimonials row ends-->

\r\n

\r\n

\r\n

\n

Answer 1

\n

使用flexbox你可以避免这个问题。您必须稍微修改一下标记。请检查随附的代码片段

\n

\n\n

.flex-row {\n  display: flex;\n  flex-wrap: wrap;\n}\n

\n\n

\r\n

\r\n

.flex-row {\n  display: flex;\n  flex-wrap: wrap;\n}\n

\r\n

.flex-row {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.testimonial-content {\r\n  text-align: center;\r\n  margin: 15px auto 15px auto;\r\n}\r\n\r\n.testimonial-content h5 {\r\n  margin-top: 20px;\r\n}\r\n\r\n.testim-logo-container {\r\n  height: 100px;\r\n  width: 100%;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.testimonial-logo {\r\n  max-width: 100px;\r\n}

\r\n

\r\n

\r\n

\n\n

\n

旧答案[过时 - JS 解决方案]

\n

\n\n

你得把height盒子修好。由于其高度可能随 变化text，因此会出现对齐问题。

\n\n

例如：

\n\n

.col-lg-6{\n height: 500px;\n}\n

\n\n

解决此问题的一种常见且快速的方法是使用等高JavaScript。

\n\n

https://css-tricks.com/equal-height-blocks-in-rows/

\n\n

equalheight = function(container) {\n\n    var currentTallest = 0,\n        currentRowStart = 0,\n        rowDivs = new Array(),\n        $el,\n        topPosition = 0;\n    $(container).each(function() {\n\n        $el = $(this);\n        $($el).height(\'auto\')\n        topPostion = $el.position().top;\n\n        if (currentRowStart != topPostion) {\n            for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {\n                rowDivs[currentDiv].height(currentTallest);\n            }\n            rowDivs.length = 0; // empty the array\n            currentRowStart = topPostion;\n            currentTallest = $el.height();\n            rowDivs.push($el);\n        } else {\n            rowDivs.push($el);\n            currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);\n        }\n        for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {\n            rowDivs[currentDiv].height(currentTallest);\n        }\n    });\n}\n$(window).resize(function() {   //to work in resize\n    equalheight(\'.col-lg-6\');\n});\n\n$(document).ready(function() {\n equalheight(\'.col-lg-6\');\n});\n

\n