與Twitter引導響應行

我有我已經建立了與Twitter的引導，像這樣三列兩排：與Twitter引導響應行

<div class="row"> 
    <div class="col-md-4"> 
    Some Stuff 
    </div> 
    <div class="col-md-4"> 
    Some more stuff 
    </div> 
    <div class="col-md-4"> 
    Even more stuff 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-4"> 
    Some Stuff 
    </div> 
    <div class="col-md-4"> 
    Some more stuff 
    </div> 
    <div class="col-md-4"> 
    Even more stuff 
    </div> 
</div>

也能正常工作一定像素寬度（三級漂亮列兩行），但是當我縮小屏幕尺寸時，它在一行中有2個，然後在另一行中有1個（對於1行）。然後，當一個iPhone屏幕的大小，他們各自在自己的行，但他們是偏離中心。

如何使這些行響應，以便當屏幕縮小時，2列顯示爲容器寬度的50％。然後，當屏幕縮小到電話設備寬度時，每列佔用容器寬度的100％。

任何幫助表示讚賞。

來源

2016-02-26 user1072337

當屏幕尺寸減小恰好第三列是什麼？ –

bootstrap在網格系統上工作以獲取更多信息https://getbootstrap.com/examples/grid/ –

參見示例：

<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div> 
    <div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div> 
    <div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div> 
    <div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div> 
    <div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div> 
    <div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div> 
</div>

來源

2016-02-26 06:14:46

使用手機大小的CSS，而不是臺式機，因此將留在所有屏幕尺寸相同。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-xs-4"> 
 
    Some Stuff 
 
    </div> 
 
    <div class="col-xs-4"> 
 
    Some more stuff 
 
    </div> 
 
    <div class="col-xs-4"> 
 
    Even more stuff 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-xs-4"> 
 
    Some Stuff 
 
    </div> 
 
    <div class="col-xs-4"> 
 
    Some more stuff 
 
    </div> 
 
    <div class="col-xs-4"> 
 
    Even more stuff 
 
    </div> 
 
</div>

來源

2016-02-26 06:59:17 RKS

請試試這個，

<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div> 
    <div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div> 
    <div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div> 
    <div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div> 
    <div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div> 
    <div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div> 
</div>

來源

2016-02-26 10:02:12

與Twitter引導響應行

回答

相關問題