bootstrap问题

makliu

1. <div class="row">
   
2.         <div class="col-lg-8 col-md-12">
   
3. 
   
4.         </div>
   
5.         <div class="col-lg-4 col-md-12">
   
6.                
   
7.                
   
8.         </div>
   
9. </div>   

复制代码

基于boostrap的栅格系统 ， 为什么   里面的 两个div它是在同一行 再不是两行的呢？

FishC

在使用Bootstrap的栅格系统时，可以将页面划分成12等分的列。默认情况下，每个列具有相同的宽度。因此，如果您在一个行（`<div class="row">`）中放置两个列（`<div class="col">`），它们会自动排列在同一行。

如果您希望这两个列位于不同的行中，可以使用更细粒度的栅格类来定义列的宽度。例如，可以使用`<div class="col-md-6">`来指定该列在中等屏幕大小下占据一半的宽度。这样，两个列就会自动换行。下面是一个例子：

1. <div class="container">
   
2.   <div class="row">
   
3.     <div class="col-md-6">
   
4.       第一个div
   
5.     </div>
   
6.     <div class="col-md-6">
   
7.       第二个div
   
8.     </div>
   
9.   </div>
   
10. </div>

复制代码

在上面的例子中，当窗口大小足够大以适应中等屏幕时，两个列将并排显示。但当窗口缩小到无法容纳两个列时，它们将自动换行。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

makliu

FishC 发表于 2024-1-16 16:05
在使用Bootstrap的栅格系统时，可以将页面划分成12等分的列。默认情况下，每个列具有相同的宽度。因此，如 ...

的例子中， 两个 div  都 是col-md-12,   每个div 不是应该占位一行的吗？

FishC

makliu 发表于 2024-01-16 16:11
的例子中， 两个 div  都 是col-md-12,   每个div 不 ...

非常抱歉，我理解错了你的问题。如果两个``都是``，它们应该占据一行的。栅格系统的工作原理是基于12等分，所以````表示一个列占据所有12份，也即是占据整个行的宽度。因此，在同一行上放置两个``会导致它们同时占据整个行的宽度，看起来好像它们在同一行。如果您希望它们分别占据一行，您可以将它们放在各自的``中，如下所示：``也可以使用其他栅格类（如``、``等）来定义具体的列宽度。例如，如果您希望每个``占据整行的一半，您可以给它们分别添加``类：  第一个div    第二个div  这样，两个``将分别占据一行。希望这次回答能解决您的疑惑！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。