bootstrap问题
<div class="row"><div class="col-lg-8 col-md-12">
</div>
<div class="col-lg-4 col-md-12">
</div>
</div>
基于boostrap的栅格系统 ， 为什么 里面的 两个div它是在同一行 再不是两行的呢？ 在使用Bootstrap的栅格系统时，可以将页面划分成12等分的列。默认情况下，每个列具有相同的宽度。因此，如果您在一个行（`<div class="row">`）中放置两个列（`<div class="col">`），它们会自动排列在同一行。
如果您希望这两个列位于不同的行中，可以使用更细粒度的栅格类来定义列的宽度。例如，可以使用`<div class="col-md-6">`来指定该列在中等屏幕大小下占据一半的宽度。这样，两个列就会自动换行。下面是一个例子：
<div class="container">
<div class="row">
<div class="col-md-6">
第一个div
</div>
<div class="col-md-6">
第二个div
</div>
</div>
</div>
在上面的例子中，当窗口大小足够大以适应中等屏幕时，两个列将并排显示。但当窗口缩小到无法容纳两个列时，它们将自动换行。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-1-16 16:05
在使用Bootstrap的栅格系统时，可以将页面划分成12等分的列。默认情况下，每个列具有相同的宽度。因此，如 ...
的例子中， 两个 div都 是col-md-12, 每个div 不是应该占位一行的吗？ makliu 发表于 2024-01-16 16:11
的例子中， 两个 div都 是col-md-12, 每个div 不 ...
非常抱歉，我理解错了你的问题。如果两个``都是``，它们应该占据一行的。栅格系统的工作原理是基于12等分，所以````表示一个列占据所有12份，也即是占据整个行的宽度。因此，在同一行上放置两个``会导致它们同时占据整个行的宽度，看起来好像它们在同一行。如果您希望它们分别占据一行，您可以将它们放在各自的``中，如下所示：``也可以使用其他栅格类（如``、``等）来定义具体的列宽度。例如，如果您希望每个``占据整行的一半，您可以给它们分别添加``类：第一个div 第二个div这样，两个``将分别占据一行。希望这次回答能解决您的疑惑！
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
页:
[1]