如何在bootstrap3中打開列號

Question

我在下面的代碼中有4個框，默認爲中等大小，所有4個框都在一行中。沒關係。 在x-小尺寸（移動）中，所有4個盒子都會充滿。

但在小尺寸（> 768px & < 1000像素）：我怎麼可以讓BOX1，BOX2的ROW1，和BOX3，Box4行2

$(document).ready(function(){ 
 
$('head').append('<meta name="viewport" content="width=1000px, initial-scale=1"/>'); 
 
});

.box { 
 
border:solid 1px red; 
 
} 
 
.box3,.box4 { 
 
background:grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="box col-sm-6 col-md-4" id="col4_1">Box 1</div> 
 
    <div class="col-sm-6 col-md-8"> 
 
     <div class="row"> 
 
     <div class="box col-sm-12 col-md-4" id="col4_2">Box 2</div> 
 
     <div class="box box3 col-sm-12 col-md-4" id="col4_3">Box 3</div> 
 
     <div class="box box4 col-sm-12 col-md-4" id="col4_4">Box 4</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

既然你有具體寬度來檢查，你需要使用Media Queries。不知道這是否會工作，但你可以從這個

@media all and (max-width: 1000px) { 
    #col4_1, 
    #col4_2, 
    #col4_3, 
    #col4_4 
    { 
     width: 50%; 
} 

Answer 2

開始嘗試兩個部分組成：一個可見的「XTRA小」和其他可見的「小」屏幕

<div class="container"> 
    <div class="row" hidden-sm> 
    <div class="box col-sm-6 col-md-4" id="col4_1">Box 1</div> 
    <div class="col-sm-6 col-md-8"> 
     <div class="row"> 
     <div class="box col-sm-12 col-md-4" id="col4_2">Box 2</div> 
     <div class="box box3 col-sm-12 col-md-4" id="col4_3">Box 3</div> 
     <div class="box box4 col-sm-12 col-md-4" id="col4_4">Box 4</div> 
     </div> 
    </div> 
    </div> 

    <div class="row" hidden-xs> 
    <div class="row"> 
     <div class="box col-sm-6" id="col4_1">Box 1</div> 
     <div class="box col-sm-6">Box 2</div> 
    </div 
    <div class="row"> 
     <div class="box box3 col-sm-6" id="col4_3">Box 3</div> 
     <div class="box box4 col-sm-6" id="col4_4">Box 4</div> 
    </div> 
    </div> 
</div> 

Answer 3

你能看看docs。

一行有12列。如果您製作一個盒子佔用：

• 12列，每個盒子將佔用一行。
• 6列，每行將有2個框。
• 4列，你會得到3行每箱。
• 3列，你會得到連續的所有4個盒子。

例如，對於中等屏幕，可以使每個盒子COL-MD-6，你會得到一箇中等屏幕上每行2盒。

從docs：

• .COL-XS-是超小型
• .COL-SM-是小
• .COL-MD-是中

請將放在同一排所有箱子

$(document).ready(function(){ 
 
$('head').append('<meta name="viewport" content="width=1000px, initial-scale=1"/>'); 
 
});

.box { 
 
border:solid 1px red; 
 
} 
 
.box3,.box4 { 
 
background:grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="box col-xs-12 col-sm-6 col-md-3" id="col4_1">Box 1</div> 
 
    <div class="box col-xs-12 col-sm-6 col-md-3" id="col4_2">Box 2</div> 
 
    <div class="box col-xs-12 col-sm-6 col-md-3 box3 " id="col4_3">Box 3</div> 
 
    <div class="box col-xs-12 col-sm-6 col-md-3 box4" id="col4_4">Box 4</div> 
 
    </div> 
 
    </div> 
 
</div>