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。这样，您的行将始终填满其容器的整个宽度。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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列宽度的总宽度。第二个div为2列宽度。

对于中型设备（col-md）：在这里，您要说的是它的介质设备是否将4列宽度更改为2列，这很好。但我不觉得第二个div是对的。因为您说如果设备很小，则将2列宽度设为8列。很奇怪，因为如果您只能在超小型设备中使用2列，为什么您希望中型设备中的8列显示相同的内容。即使有1列宽度也可以。但仍取决于您的UI（可能是您正在显示在超小设备屏幕视图中隐藏的额外元素）

还要记住这些引导规则

<div class="col-xs-4">：只有这个规则，你说的是无论设备的大小总是有4列总宽度：即如果在col-xs-4之后没有指定其他类，那么相同的效果将会也被带到其他设备的宽度。所以它与col-xs-4 col-sm-4 col-md-4 col-lg-4
<div class="col-xs-4 col-md-2">：这相当于<div class="col-xs-4 col-sm-4 col-md-2 col-lg-2">，所以它的想法相同。来自较低设备的类设置将应用于其较高设备，直到还应用其他类。

请告诉我这是否清楚。

在bootstrap移动设计中需要帮助

2 个答案: