需要帮助引导移动设计

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">，所以它的想法是一样的。来自较低设备的类别设置将应用于其较高的设备，直到应用其他类别。

让我知道这是否清楚。