Bootstrap v4中的響應式布局將右行下推
[英]Responsive layout in Bootstrap v4 is push next line to the right
問題描述
我對bootstrap v4的網格系統有一點問題。 我有一堆應該完全響應的列（4圈-> 3圈-> 2圈）。 現在的問題是，當視口寬度變為某個大小時，圓不再很好地堆疊。 請參閱以下屏幕截圖：
好：
壞：
我的感覺是這與名稱/標題的長度有關，但我不知道如何解決。
這是整個示例頁面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>
謝謝你的幫助！
1 個解決方案
解決方案1
1 已采納 2016-02-19 17:44:28
這是因為在較小的屏幕上，具有“標題較長的名稱”的元素具有更高的高度。 但是它仍然嘗試浮動其他項目，這就是為什么它變得如此。
通常，使用類似的東西很容易修復
.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*/
}
但是在您的情況下，您有不可見的模態，所以它將是
.text-md-center:nth-child(6n+1) {
clear: left;
}
並且一旦您連續擁有2個項目，就可以在媒體查詢中使用
.text-md-center:nth-child(4n+1) {
clear: left;
}
將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]
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.