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連續響應 - 如何？

回答

相關問題