Bootstrap 3连续响应 - 如何？

所以我有一排2或3个不同的col的里面。我希望它能像这样的网站：http://wrapbootstrap.com/preview/WB0196957 特色。有这3个图像与文本，当我最小化我的浏览器，他们将被对齐下每一个除了每一个。Bootstrap 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>

来源

2014-11-04 lena

你的例子不包含图像。 – Christina 2014-11-05 02:31:21

是的，这是自定义CSS做位置变化：堆叠的图像和文字旁边。它可以做到，也许，只有网格类，但我不会为一个简单的事情添加更多的HTML。 – Christina 2014-11-05 02:37:12

我没有看到你在哪里”我试图把你的图片，但只要你把他们放在像这样的“缩略图”类，他们不应该重叠。

比应用col-xs-6 col-md-12 and将标题的顶部/底部方向更改为左/右。

看一个例子：http://www.bootply.com/h6STovl9Qq

来源

2014-11-04 17:05:46

谢谢！这非常有帮助！ – lena 2014-11-06 17:10:34

-1

在要强制元素看起来一样在大屏幕时，您必须将它们添加这样

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Hello</div>

其他敏感类请仔细阅读引导文件

http://getbootstrap.com/css/

或者，如果你使用较少，你可以做这样的事情

.my-class{ 
.make-lg-column(6); 
.make-md-column(6); 
.make-sm-column(6); 
.make-xs-column(6); 
} 

<div class="my-class">Hello</div>

来源

2014-11-04 12:57:57

你的第一个例子非常多余，见https://github.com/twbs/bootlint/wiki/E029 – cvrebert 2014-11-04 17:14:06

@cvrebert那你为什么给我投票呢？我使用LESS时更好的解决方案？ – 2014-11-05 07:45:27

目前，您使用的这些布局：

4/(+2)4的第一行（.col-md-4 + .col-md-offet-2.col-md-4）
6/6第二线（.col-md-6 + .col-md-6）

你需要了解Bootstrap的几件事情：

md表示“中等”（即，设备比992px更大，并且厚度小于1200像素）
引导是移动第一，这意味着它会尝试第一渲染电子X TRA-小号商场布局，然后SM所有，然后m e d ium，然后l ar g e。
无法使用任何列类，Bootstrap将使用12列类。

这意味着你必须为超小和小设备未设置任何列类。在这种情况下，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>

来源

2014-11-04 13:29:15 zessx

Bootstrap 3连续响应 - 如何？

回答

相关问题