所以我有一排有2或3个不同的col。我希望它像在这个网站上一样:http://wrapbootstrap.com/preview/WB0196957 特色。有3个带有文字的图像,当我最小化我的浏览器时,它们将在每个图像下对齐,而不是每个图像。
那我该怎么做?
我尝试过这样但是当我最小化浏览器时这不起作用,因为事情将重叠,因为它们在一行中。
<div class="container dates-sub">
<div class="row">
<div class="col-md-4">
<span class="day-sub">28</span>
<span class="month-sub">09</span>
<span class="year-sub">2015</span>
</div>
<div class="col-md-offset-2 col-md-4">
<span class="day-sub">30</span>
<span class="month-sub">10</span>
<span class="year-sub">2015</span>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="blog-title">
<h3 class="blog-heading">NASA-ESA Space Festival San Francisco</h3>
<p class="blog-dates">28.09.2015, 19:00, Hohenzollernring 56,<br>50672 Köln, Germany <i class="fa fa-map-marker"></i></p>
</div>
<div class="blog-sub">
<p>Dolore magna aliquyam erat, sed diam vol paxo
eos et accusam et justo duo dolores et ea ruits-
clita kasd gubergren.
At vero eos et accusam et justo duo dolores et
ea clita kasd gubergren, no sea takimata sanda-
ipsum dolor sit amet. Dolore magna aliquyam e-
rat, sed diam vol paxo eos et accusam et justo
duo dolores et ea.</p>
</div>
</div>
<div class="col-md-6">
<div class="blog-title">
<h3 class="blog-heading">Benefit-Gala</h3>
<p class="blog-dates">30.10.2015, 19:00, Hohenzollernring 56,<br>50672 Köln, Germany <i class="fa fa-map-marker"></i></p>
</div>
<div class="blog-sub">
<p>Dolore magna aliquyam erat, sed diam vol paxo
eos et accusam et justo duo dolores et ea ruits-
clita kasd gubergren.
At vero eos et accusam et justo duo dolores et
ea clita kasd gubergren, no sea takimata sanda-
ipsum dolor sit amet. Dolore magna aliquyam e-
rat, sed diam vol paxo eos et accusam et justo
duo dolores et ea. At vero eos et accusam et ju-
sto duo dolores etea clita kasd gubergren, no s-
ea takimata sandaipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
答案 0 :(得分:1)
目前,您正在使用这些布局:
4 / (+2)4
代表第一行(.col-md-4
+ .col-md-offet-2.col-md-4
)6 / 6
代表第二行(.col-md-6
+ .col-md-6
)你需要了解一些关于Bootstrap的事情:
md
表示“中等”(即设备大于992像素,且小于1200像素)这意味着您没有为 extra-small 和 small 设备设置任何列类。在这种情况下,Bootstrap将它们渲染为12列元素,这说明它们占据了整行。
要让您的布局适用于每个设备,您需要尽可能使用最小的列类.col-xs-xx
:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container dates-sub">
<div class="row">
<div class="col-xs-4">
<span class="day-sub">28</span>
<span class="month-sub">09</span>
<span class="year-sub">2015</span>
</div>
<div class="col-xs-offset-2 col-xs-4">
<span class="day-sub">30</span>
<span class="month-sub">10</span>
<span class="year-sub">2015</span>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="blog-title">
<h3 class="blog-heading">NASA-ESA Space Festival San Francisco</h3>
<p class="blog-dates">28.09.2015, 19:00, Hohenzollernring 56,<br>50672 Köln, Germany <i class="fa fa-map-marker"></i></p>
</div>
<div class="blog-sub">
<p>Dolore magna aliquyam erat, sed diam vol paxo
eos et accusam et justo duo dolores et ea ruits-
clita kasd gubergren.
At vero eos et accusam et justo duo dolores et
ea clita kasd gubergren, no sea takimata sanda-
ipsum dolor sit amet. Dolore magna aliquyam e-
rat, sed diam vol paxo eos et accusam et justo
duo dolores et ea.</p>
</div>
</div>
<div class="col-xs-6">
<div class="blog-title">
<h3 class="blog-heading">Benefit-Gala</h3>
<p class="blog-dates">30.10.2015, 19:00, Hohenzollernring 56,<br>50672 Köln, Germany <i class="fa fa-map-marker"></i></p>
</div>
<div class="blog-sub">
<p>Dolore magna aliquyam erat, sed diam vol paxo
eos et accusam et justo duo dolores et ea ruits-
clita kasd gubergren.
At vero eos et accusam et justo duo dolores et
ea clita kasd gubergren, no sea takimata sanda-
ipsum dolor sit amet. Dolore magna aliquyam e-
rat, sed diam vol paxo eos et accusam et justo
duo dolores et ea. At vero eos et accusam et ju-
sto duo dolores etea clita kasd gubergren, no s-
ea takimata sandaipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
答案 1 :(得分:1)
我没有看到您尝试放置图片的位置,但只要您将它们放在像这样的“缩略图”类<div class="thumbnail"><img src="..."></div>
中,它们就不应重叠。
应用col-xs-6 col-md-12 and
将标题的顶部/底部方向更改为左/右。
答案 2 :(得分:-1)
请阅读bootstrap文档
如果你想强制元素看起来像在大屏幕上一样,你必须添加其他响应类这样的
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Hello</div>
或者,如果你使用更少,你可以做这样的事情
.my-class{
.make-lg-column(6);
.make-md-column(6);
.make-sm-column(6);
.make-xs-column(6);
}
<div class="my-class">Hello</div>