Question

假设我想使用bootstrap创建一个布局，其中有两列用于平板电脑，3列用于桌面，4用于大型桌面。

我不明白要在一行内放多少个div。

什么是正确的代码？为什么？

此？

$PATH

或

<div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
</div>

或

<div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
</div>
<div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3"></div>
</div>

Answer 1

Bootstrap的row基本上是 12列。

这意味着您的示例在列值上确实没有完全正确的方法，但您无需反正放置所有大小规格。

您可以执行以下操作：

<div class="col-sm-6 col-md-4"></div>
<div class="col-sm-6 col-md-4"></div>
<div class="col-sm-12 col-md-4"></div>

在这个例子中，三列将并排放在一起，直到md-breakpoint（宽度约为992像素），然后，两个第一列将并排弹出，而第三个下降填充整个屏幕宽度低于这两个。

另一个例子：

<div class="col-md-6"></div>
<div class="col-sm-8 col-md-6"></div>
<div class="col-sm-4 col-md-6"></div>
<div class="col-md-6"></div>

因此，将有两列并排，直到宽度降至992px以下，然后中间的两列将为8/4，而其他两列则为全宽。

列数没有实际限制，但应确保每个视口中的列宽值（xs，sm，md，lg）总计为12 或精确值乘以，例如，两个。

Answer 2

<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3"></div>
<div class="col-sm-6 col-md-4 col-lg-3"></div>
<div class="col-sm-6 col-md-4 col-lg-3"></div>
<div class="col-sm-6 col-md-4 col-lg-3"></div>
</div>

在您的第一个示例中，每行会在小屏幕中放置2列。中型屏幕每行3列。大型屏幕中有4列。引导行总共填充了12列。所以这应该是您的预期用例。

请务必在开头重置应用程序的CSS，这样您就不会获得任何奇怪的边距或填充。

Answer 3

要在行中放置50个div，您需要使用嵌套列。请参阅下面的示例..您可以在单个div中拥有任意数量的列...按全屏查看效果，因为我使用了col-lg-*。对于其他屏幕尺寸，使用col-md-* col-sm-* col-xs-*将所有屏幕尺寸一起使用，以使您的设计更具响应性。

<html>
  <head>
  <meta charset="UTF-8">
        <title>Secure Login</title>
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </head>
<body>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12" style="background-color:red;">
<div class="col-lg-3" style="background-color:blue;">
<div class="col-lg-4" style="background-color:brown;">
cheers!
</div>
<div class="col-lg-4" style="background-color:cyan;">
cheers!
</div>
<div class="col-lg-4" style="background-color:yellow;">
cheers!
</div>

</div>
<div class="col-lg-3" style="background-color:green;">
<div class="col-lg-2" style="background-color:brown;">

cheers!
</div>
<div class="col-lg-2" style="background-color:cyan;">
cheers!
</div>
<div class="col-lg-2" style="background-color:yellow;">
cheers!
</div>
<div class="col-lg-2" style="background-color:brown;">

cheers!
</div>
<div class="col-lg-2" style="background-color:cyan;">
cheers!
</div>
<div class="col-lg-2" style="background-color:yellow;">
cheers!
</div>

</div>
<div class="col-lg-3" style="background-color:black;">
<div class="col-lg-4" style="background-color:brown;">
cheers!
</div>
<div class="col-lg-4" style="background-color:cyan;">
cheers!
</div>
<div class="col-lg-4" style="background-color:yellow;">
cheers!
</div>

</div>
<div class="col-lg-3" style="background-color:white;">
<div class="col-lg-4" style="background-color:brown;">
cheers!
</div>
<div class="col-lg-4" style="background-color:cyan;">
cheers!
</div>
<div class="col-lg-4" style="background-color:yellow;">
cheers!
</div>

</div>
</div>
</div>
</div>
      
</body>
</html>

希望这有帮助！

在bootstap网格系统中的div div中放置了多少div class = col- *？

3 个答案: