问题描述
如何在没有大空间的情况下正确显示我的网格并且看起来不错?
我的代码:
<div class="first"><div 类="容器"><div 类="行"><div class="col-md-6"><img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/General/02/35/49/87/2354987_w2.jpg" class="img-responsive"/></div><div class="col-md-3"><img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/01/83/81/26/1838126_s2.jpg" class="img-responsive"/></div><div class="col-md-3"><img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/02/36/89/27/2368927_s2.jpg" class="img-responsive"/></div><div class="col-md-6"><img src="http://i.telegraph.co.uk/multimedia/archive/03498/BEAU_3498448b.jpg" class="img-responsive"/></div><div class="col-md-3"><img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/01/83/81/26/1838126_s2.jpg" class="img-responsive"/></div><div class="col-md-3"><img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/02/36/89/27/2368927_s2.jpg" class="img-responsive"/></div></div></div>
也许我应该使用任何 JS 脚本或其他东西?请帮忙:)
你需要清除添加到列中的float
(列有float: left
应用于它们默认情况下)在您使用的断点处 (col-md-* 为 992px) 或当您总共有 12 列时将列放在单独的行中.
<div classes=container><div 类=行><div 类=col-*-6><div 类=col-*-6><div><!-- 等于 12 列 --><div 类=行><div 类=col-*-6><div 类=col-*-3><div 类=col-*-3><div><!-- 等于 12 列 -->
使用行的示例
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="样式表"/><div 类="容器"><div 类="行"><div class="col-md-6"><img src="http://placehold.it/500x250/000" class="img-responsive"/></div><div class="col-md-3"><img src="http://placehold.it/250x250/f00" class="img-responsive"/></div><div class="col-md-3"><img src="http://placehold.it/250x250/ff0" class="img-responsive"/></div></div><div 类="行"><div class="col-md-6"><img src="http://placehold.it/500x250/000" class="img-responsive"/></div><div class="col-md-3"><img src="http://placehold.it/250x250/f00" class="img-responsive"/></div><div class="col-md-3"><img src="http://placehold.it/250x250/ff0" class="img-responsive"/></div></div><div 类="行"><div class="col-md-6"><img src="http://placehold.it/500x250/000" class="img-responsive"/></div><div class="col-md-3"><img src="http://placehold.it/250x250/f00" class="img-responsive"/></div><div class="col-md-3"><img src="http://placehold.it/250x250/ff0" class="img-responsive"/></div></div></div>
示例自己清除浮动@ 992px,同时仅对所有列使用单行.注意:确保以某种方式指定这些列,这样就不会干扰其他地方的网格;该示例使用通用 .item
类来处理此问题,但可以通过多种方式完成.
参见 nth-child 和 clear 在 MDN 上了解更多信息.
@media (min-width: 992px) {.item:nth-child(3n+1) {清除:左;}}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="样式表"/><div 类="容器"><div 类="行"><div class="col-md-6 item"><img src="http://placehold.it/500x250/000" class="img-responsive"/></div><div class="col-md-3 项目"><img src="http://placehold.it/250x250/f00" class="img-responsive"/></div><div class="col-md-3 项目"><img src="http://placehold.it/250x250/ff0" class="img-responsive"/></div><div class="col-md-6 item"><img src="http://placehold.it/500x250/000" class="img-responsive"/></div><div class="col-md-3 项目"><img src="http://placehold.it/250x250/f00" class="img-responsive"/></div><div class="col-md-3 项目"><img src="http://placehold.it/250x250/ff0" class="img-responsive"/></div><div class="col-md-6 item"><img src="http://placehold.it/500x250/000" class="img-responsive"/></div><div class="col-md-3 项目"><img src="http://placehold.it/250x250/f00" class="img-responsive"/></div><div class="col-md-3 项目"><img src="http://placehold.it/250x250/ff0" class="img-responsive"/></div></div></div>
how can I display correctly my grid without huge space, and look good?
My code:
<div class="first">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/General/02/35/49/87/2354987_w2.jpg" class="img-responsive"/>
</div>
<div class="col-md-3">
<img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/01/83/81/26/1838126_s2.jpg" class="img-responsive"/>
</div>
<div class="col-md-3">
<img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/02/36/89/27/2368927_s2.jpg" class="img-responsive"/>
</div>
<div class="col-md-6">
<img src="http://i.telegraph.co.uk/multimedia/archive/03498/BEAU_3498448b.jpg" class="img-responsive"/>
</div>
<div class="col-md-3">
<img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/01/83/81/26/1838126_s2.jpg" class="img-responsive"/>
</div>
<div class="col-md-3">
<img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/02/36/89/27/2368927_s2.jpg" class="img-responsive"/>
</div>
</div>
</div>
Maybe I should use any JS script or smthing? Please help :)
You need to clear the float
added to the columns (columns have float: left
applied to them by default) at the breakpoint(s) you're using (992px for col-md-*) or place your columns inside individual rows when you have a total of 12 columns.
<div classs=container>
<div classs=row>
<div classs=col-*-6>
<div classs=col-*-6>
<div><!-- EQUALS 12 COLUMNS -->
<div classs=row>
<div classs=col-*-6>
<div classs=col-*-3>
<div classs=col-*-3>
<div><!-- EQUALS 12 COLUMNS -->
<div>
Example Using Rows
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/500x250/000" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250/f00" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250/ff0" class="img-responsive" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/500x250/000" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250/f00" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250/ff0" class="img-responsive" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/500x250/000" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250/f00" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250/ff0" class="img-responsive" />
</div>
</div>
</div>
Example Clearing the Float @ 992px yourself while only utilizing a single row for all your columns.Note: Make sure to specify these columns somehow so this doesn't disturb another part of the grid elsewhere; the example using a generic .item
class to handle this but can be done in many ways.
See nth-child and clear on MDN for more info.
@media (min-width: 992px) {
.item:nth-child(3n+1) {
clear: left;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6 item">
<img src="http://placehold.it/500x250/000" class="img-responsive" />
</div>
<div class="col-md-3 item">
<img src="http://placehold.it/250x250/f00" class="img-responsive" />
</div>
<div class="col-md-3 item">
<img src="http://placehold.it/250x250/ff0" class="img-responsive" />
</div>
<div class="col-md-6 item">
<img src="http://placehold.it/500x250/000" class="img-responsive" />
</div>
<div class="col-md-3 item">
<img src="http://placehold.it/250x250/f00" class="img-responsive" />
</div>
<div class="col-md-3 item">
<img src="http://placehold.it/250x250/ff0" class="img-responsive" />
</div>
<div class="col-md-6 item">
<img src="http://placehold.it/500x250/000" class="img-responsive" />
</div>
<div class="col-md-3 item">
<img src="http://placehold.it/250x250/f00" class="img-responsive" />
</div>
<div class="col-md-3 item">
<img src="http://placehold.it/250x250/ff0" class="img-responsive" />
</div>
</div>
</div>
这篇关于引导网格未正确显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!