Responsive layout in Bootstrap v4 is push next line to the right
Question
I have a little problem with bootstrap v4's grid system. I have a bunch of columns that are supposed to be completely responsive (4 circles -> 3 circles -> 2 circles). 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:
<!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 answers
solution1
1 ACCPTED 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
.text-md-center:nth-child(4n+1) {
clear: left;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap v4 push and pulls
bootstrap v4 push pull gone
Aligning button to the right of a 'card' using Bootstrap v4
Push div next to centered and responsive Bootstrap container element
Social Media icons appearing to the right instead of bottom for bootstrap responsive layout
Position two divs right next to each other (responsive) in Bootstrap
Bootstrap v4 float-right doesn't work. [Replacement for pull-right]
Responsive Bootstrap Push Menu
carousel with thumbnails with bootstrap v4
Bootstrap v4 Carousel Not Initializing
Related Tags