需要幫助引導移動設計

Question

我試圖理解引導設計方法來移動

例如，如果有兩個內容名稱和zyx--

<div class = "container row"> 
<div class = "col-xs-4 col-md-4">Name</div> 
<div class = "col-xs-8 col-md-8">zyx</div> 
</div> 

現在的「名」和「 zyx「必須水平觀看或堆疊在另一個之下

假設如果內容如下給出，所以當調整大小時，它們彼此堆疊在一起。行可以只包含12列，但是是在正確方法下面的代碼

<div class = "container row"> 
<div class = "col-xs-12 col-md-4">Name</div> 
<div class = "col-xs-12 col-md-8">zyx</div> 
</div> 

Answer 1

你的代碼有一些錯誤。首先，你想讓你的行成爲你的容器div的子元素。

<div class="container"> 
    <div class="row"> 
     etc... 
    </div> 
</div> 

否則你的容器將粘在視口的一側。其次，確保相同寬度的列共計12個是個好主意。例如，將col-md-2更改爲col-md-4。這樣你的行將永遠填滿它們容器的整個寬度。

.col-1{ 
 
\t background:yellow; 
 
} 
 
.col-2{ 
 
\t background:lightblue; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-12 col-md-4 col-1">Name</div> 
 
     <div class="col-xs-12 col-md-8 col-2">zyx</div> 
 
    </div> 
 
</div>

Answer 2

是的，沒有錯的代碼。這一切都取決於你在div中顯示的內容以及你希望在屏幕上顯示多少寬度。

解釋你的代碼

<div class = "container row"> 
<div class = "col-xs-4 col-md-2">Name</div> 
<div class = "col-xs-2 col-md-8">zyx</div> 
</div> 

對於超小型設備（COL-XS）：您是說，如果在所有它的一個額外的小裝置，使總的第一個div 4 column'd寬度寬度。第二個div爲2列寬。

對於中等設備（col-md）：在這裏您是在說如果它的中型設備將4列的寬度更改爲2列，這很好。但我不覺得第二個div是對的。因爲你說的是​​如果設備很小，請將2列寬度設置爲8列。奇怪的原因是，如果您只能在特別小的設備中使用2列，爲什麼您希望中型設備中的8列顯示相同的內容。即使是1列寬，也可以。不過還是要看你的UI（可能是你正在顯示其在超小型設備屏幕視圖中隱藏多餘的元素）也請記住引導這些規則

1. <div class="col-xs-4">

   ：只有這個規則你說不問題是什麼尺寸的設備總是有4列的總寬度：即如果在col-xs-4之後沒有指定其他類，那麼相同的效果也將被傳送到其他設備的寬度。所以它會與col-xs-4 col-sm-4 col-md-4 col-lg-4

2. <div class="col-xs-4 col-md-2"><div class="col-xs-4 col-md-2">相同：這相當於<div class="col-xs-4 col-sm-4 col-md-2 col-lg-2">，所以它的想法是一樣的。來自較低設備的類別設置將應用於其較高的設備，直到應用其他類別。

讓我知道這是否清楚。