Html 需要引导移动设计方面的帮助吗

我试图了解移动设备的引导设计方法

例如，如果有两个内容name和zyx--

名称
zyx

现在“名称”和“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>

名称
zyx

您的代码有几处错误。首先，希望行是容器div的子元素

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

名称
zyx

是的，代码中没有错误。这完全取决于您在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>

名称
zyx

对于超小型设备（列xs）：您的意思是，如果是超小型设备，则将总宽度的第一个第4分栏宽度设为。第二个div为2列的宽度

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

还记得这些引导规则吗

：只有这条规则，您才会说，无论设备大小，总宽度始终为4列：即如果在col-xs-4之后没有指定其他类，则其他设备宽度也将具有相同的效果。因此，它将与

col-xs-4 col-sm-4 col-md-4 col-lg-4

：这将等同于

，因此其想法相同。较低设备的类设置也将应用于较高设备，直到应用其他类

---

如果这是清楚的，请告诉我。

@Deep13那么我该怎么处理你贴的小提琴呢。？我能帮你什么吗对不起。。因此，问题是我正在创建一个类似于表的视图。在移动设备中，这必须以类似的方式在具有水平滚动的媒体设备中进行查看。在引导中，是否有表的替代方法。当在媒体设备中调整浏览器的大小时，粗体项目显示为水平，现在，在小型设备中，它也必须是水平显示的..而非粗体的项目将在粗体项目旁边重复。我如何实现这一点？我理解您的要求，这将需要大量的css。我个人还不太支持CSS。你为什么不用适当的细节来提出一个新的问题，同时发布一张你想要的结果的图片呢。你肯定会得到帮助的

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