Bootstrap v4中的响应式布局将右行下推
[英]Responsive layout in Bootstrap v4 is push next line to the right
问题描述
I have a little problem with bootstrap v4's grid system. 
我对bootstrap v4的网格系统有一点问题。 I have a bunch of columns that are supposed to be completely responsive (4 circles -> 3 circles -> 2 circles). 我有一堆应该完全响应的列（4圈-> 3圈-> 2圈）。 Now the problem is that at some point when the viewport width becomes a certain size, the circles no longer stack up nicely. 现在的问题是，当视口宽度变为某个大小时，圆不再很好地堆叠。 See the following screenshots: 请参阅以下屏幕截图：
Good: 好：
Bad: 坏：
My feeling is that this has something to do with the length of the names/titles, but I don't know how to fix it. 我的感觉是这与名称/标题的长度有关，但我不知道如何解决。
Here is the entire example page HTML: 这是整个示例页面HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300' rel='stylesheet' type='text/css'>
<style>
body {
color: #000; }
h3 {
font-size: 120%; }
h4 {
font-size: 120%;
padding-bottom: 15px;
line-height: normal; }
a {
color: #000;
text-decoration: none; }
a:hover {
color: #fc3f04;
text-decoration: none; }
.awp-team-title {
background-color: #efefef;
padding-top: 3em; }
.awp-team {
background-color: #efefef;
padding-bottom: 3em;
border-bottom: 1px solid #d9d2ca; }
.awp-team img.img-wt-margin {
padding-left: 35px;
padding-right: 35px;
margin-top: 50px; }
.awp-team .modal-title {
padding-bottom: 1em; }
.awp-team img.modal-img {
width: 80%; }
div.awp-team :hover > img {
opacity: 0.7; }
</style>
</head>
<body>
<div class="row awp-team-title">
<div class="col-xs-offset-1 col-xs-10
col-sm-offset-1 col-sm-10
col-md-offset-1 col-md-10
title">
<h3>This is a very long title containing a lot of information</h3>
</div>
</div>
<div class="row awp-team">
<div class='col-sm-offset-1 col-sm-10'>
<div class='col-xs-6 text-xs-center col-sm-6 text-sm-center col-md-4 text-md-center col-lg-3 text-lg-center'>
<a href='javascript:void(0);' onclick='$("#rdi-modal").modal();'>
<img class='img-fluid img-circle img-wt-margin' src='https://placehold.it/400x400' />
<p><strong>Fake person </strong><br>Fake title</p>
</a>
</div>
<div class='modal fade' id='rdi-modal' tabindex='-1' role='dialog' aria-labelledby='rdiModalLabel' aria-hidden='true'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<div class='container-fluid'>
<div class='col-xs-offset-1 col-xs-10 modal-title'>
<h3>Fake person</h3>
<p>Fake title</p>
</div>
<div class='col-xs-offset-0 col-xs-4'>
<img class='img-fluid img-circle modal-img' src='https://placehold.it/400x400' />
</div>
<div class='col-xs-offset-0 col-xs-8'>
<p>This is modal content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-xs-6 text-xs-center col-sm-6 text-sm-center col-md-4 text-md-center col-lg-3 text-lg-center'>
<a href='javascript:void(0);' onclick='$("#ost-modal").modal();'>
<img class='img-fluid img-circle img-wt-margin' src='https://placehold.it/400x400' />
<p><strong>Fake person </strong><br>Fake title</p>
</a>
</div>
<div class='modal fade' id='ost-modal' tabindex='-1' role='dialog' aria-labelledby='ostModalLabel' aria-hidden='true'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<div class='container-fluid'>
<div class='col-xs-offset-1 col-xs-10 modal-title'>
<h3>Fake person</h3>
<p>Fake title</p>
</div>
<div class='col-xs-offset-0 col-xs-4'>
<img class='img-fluid img-circle modal-img' src='https://placehold.it/400x400' />
</div>
<div class='col-xs-offset-0 col-xs-8'>
<p>This is modal content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-xs-6 text-xs-center col-sm-6 text-sm-center col-md-4 text-md-center col-lg-3 text-lg-center'>
<a href='javascript:void(0);' onclick='$("#mfi-modal").modal();'>
<img class='img-fluid img-circle img-wt-margin' src='https://placehold.it/400x400' />
<p><strong>Fake person </strong><br>Fake title</p>
</a>
</div>
<div class='modal fade' id='mfi-modal' tabindex='-1' role='dialog' aria-labelledby='mfiModalLabel' aria-hidden='true'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<div class='container-fluid'>
<div class='col-xs-offset-1 col-xs-10 modal-title'>
<h3>Fake person</h3>
<p>Fake title</p>
</div>
<div class='col-xs-offset-0 col-xs-4'>
<img class='img-fluid img-circle modal-img' src='https://placehold.it/400x400' />
</div>
<div class='col-xs-offset-0 col-xs-8'>
<p>This is modal content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-xs-6 text-xs-center col-sm-6 text-sm-center col-md-4 text-md-center col-lg-3 text-lg-center'>
<a href='javascript:void(0);' onclick='$("#rku-modal").modal();'>
<img class='img-fluid img-circle img-wt-margin' src='https://placehold.it/400x400' />
<p><strong>Fake person with longer name </strong><br>Fake person with longer title</p>
</a>
</div>
<div class='modal fade' id='rku-modal' tabindex='-1' role='dialog' aria-labelledby='rkuModalLabel' aria-hidden='true'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<div class='container-fluid'>
<div class='col-xs-offset-1 col-xs-10 modal-title'>
<h3>Fake person with longer name</h3>
<p>Fake person with longer title</p>
</div>
<div class='col-xs-offset-0 col-xs-4'>
<img class='img-fluid img-circle modal-img' src='https://placehold.it/400x400' />
</div>
<div class='col-xs-offset-0 col-xs-8'>
<p>This is modal content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-xs-6 text-xs-center col-sm-6 text-sm-center col-md-4 text-md-center col-lg-3 text-lg-center'>
<a href='javascript:void(0);' onclick='$("#phe-modal").modal();'>
<img class='img-fluid img-circle img-wt-margin' src='https://placehold.it/400x400' />
<p><strong>Fake person </strong><br>Fake title</p>
</a>
</div>
<div class='modal fade' id='phe-modal' tabindex='-1' role='dialog' aria-labelledby='pheModalLabel' aria-hidden='true'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<div class='container-fluid'>
<div class='col-xs-offset-1 col-xs-10 modal-title'>
<h3>Fake person</h3>
<p>Fake title</p>
</div>
<div class='col-xs-offset-0 col-xs-4'>
<img class='img-fluid img-circle modal-img' src='https://placehold.it/400x400' />
</div>
<div class='col-xs-offset-0 col-xs-8'>
<p>This is modal content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-xs-6 text-xs-center col-sm-6 text-sm-center col-md-4 text-md-center col-lg-3 text-lg-center'>
<a href='javascript:void(0);' onclick='$("#jja-modal").modal();'>
<img class='img-fluid img-circle img-wt-margin' src='https://placehold.it/400x400' />
<p><strong>Fake person with longer name </strong><br>Fake title with longer title</p>
</a>
</div>
<div class='modal fade' id='jja-modal' tabindex='-1' role='dialog' aria-labelledby='jjaModalLabel' aria-hidden='true'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<div class='container-fluid'>
<div class='col-xs-offset-1 col-xs-10 modal-title'>
<h3>Fake person with longer name</h3>
<p>Fake title with longer title</p>
</div>
<div class='col-xs-offset-0 col-xs-4'>
<img class='img-fluid img-circle modal-img' src='https://placehold.it/400x400' />
</div>
<div class='col-xs-offset-0 col-xs-8'>
<p>This is modal content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-xs-6 text-xs-center col-sm-6 text-sm-center col-md-4 text-md-center col-lg-3 text-lg-center'>
<a href='javascript:void(0);' onclick='$("#gla-modal").modal();'>
<img class='img-fluid img-circle img-wt-margin' src='https://placehold.it/400x400' />
<p><strong>Fake person </strong><br>Fake title</p>
</a>
</div>
<div class='modal fade' id='gla-modal' tabindex='-1' role='dialog' aria-labelledby='glaModalLabel' aria-hidden='true'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<div class='container-fluid'>
<div class='col-xs-offset-1 col-xs-10 modal-title'>
<h3>Fake person</h3>
<p>Fake title</p>
</div>
<div class='col-xs-offset-0 col-xs-4'>
<img class='img-fluid img-circle modal-img' src='https://placehold.it/400x400' />
</div>
<div class='col-xs-offset-0 col-xs-8'>
<p>This is modal content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-xs-6 text-xs-center col-sm-6 text-sm-center col-md-4 text-md-center col-lg-3 text-lg-center'>
<a href='javascript:void(0);' onclick='$("#ega-modal").modal();'>
<img class='img-fluid img-circle img-wt-margin' src='https://placehold.it/400x400' />
<p><strong>Fake person </strong><br>Fake title</p>
</a>
</div>
<div class='modal fade' id='ega-modal' tabindex='-1' role='dialog' aria-labelledby='egaModalLabel' aria-hidden='true'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<div class='container-fluid'>
<div class='col-xs-offset-1 col-xs-10 modal-title'>
<h3>Fake person</h3>
<p>Fake title</p>
</div>
<div class='col-xs-offset-0 col-xs-4'>
<img class='img-fluid img-circle modal-img' src='https://placehold.it/400x400' />
</div>
<div class='col-xs-offset-0 col-xs-8'>
<p>This is modal content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
Thanks for your help! 谢谢你的帮助！
1 个解决方案
解决方案1
1 已采纳 2016-02-19 17:44:28
The reason for that is that the element with "name with longer title" has more height on smaller screens. 这是因为在较小的屏幕上，具有“标题较长的名称”的元素具有更高的高度。 But it still tries to float other items and that's why it becoming like this. 但是它仍然尝试浮动其他项目，这就是为什么它变得如此。
In general it's easy to fix with something like 通常，使用类似的东西很容易修复
.person:nth-child(3n+1) { /* We pick first item of each row (3 in row) */
clear: left; /* Thanks buddy, no need to float me anymore*/
}
But in your case you have invisible modals, so it will be 但是在您的情况下，您有不可见的模态，所以它将是
.text-md-center:nth-child(6n+1) {
clear: left;
}
And once you'll have 2 items in a row rewrite it in media queries with 并且一旦您连续拥有2个项目，就可以在媒体查询中使用
.text-md-center:nth-child(4n+1) {
clear: left;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Bootstrap v4推拉 - Bootstrap v4 push and pulls
bootstrap v4推拉走了 - bootstrap v4 push pull gone
使用Bootstrap v4将“卡片”右侧的对齐按钮 - Aligning button to the right of a 'card' using Bootstrap v4
将div推到居中且响应迅速的Bootstrap容器元素旁边 - Push div next to centered and responsive Bootstrap container element
社交媒体图标显示在右侧而不是底部，以进行引导响应式布局 - Social Media icons appearing to the right instead of bottom for bootstrap responsive layout
在 Bootstrap 中将两个 div 并排放置（响应式） - Position two divs right next to each other (responsive) in Bootstrap
Bootstrap v4 float-right不起作用。 [替换为右拉] - Bootstrap v4 float-right doesn't work. [Replacement for pull-right]
响应式自举推送菜单 - Responsive Bootstrap Push Menu
带有 bootstrap v4 的缩略图轮播 - carousel with thumbnails with bootstrap v4
Bootstrap v4传送带未初始化 - Bootstrap v4 Carousel Not Initializing
相关标签