如何制作自定义引导网格？

Question

我正在尝试制作这样的自定义引导网格，但效果并不好：

这是我要制作的网格：

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 box-area">
      <p>text</p>
    </div>
    <div class="col-sm-9 slide-area">  
    </div>
  </div>
</div>

Answer 1

Bootstrap的网格系统响应迅速。基本上，这些网格在不同屏幕尺寸的设备上不断变换。因此，如果您在像桌面这样的大屏幕上工作，则必须处理屏幕尺寸较小的其他设备。

我将讨论有关网格系统如何工作的基础知识，但我没有为您想要实现的目标制作代码。

关键断点

媒体查询是否与设备的屏幕尺寸有关。

• ＆lt; 768px屏幕尺寸 - 超小型设备（手机）。
• 768px屏幕尺寸 - 小型设备（平板电脑）。
• 992px屏幕尺寸 - 中型设备（桌面）
• 1200px屏幕尺寸 - 大型设备（大型桌面）。

  

手机屏幕尺寸小于768像素，所以它是   被视为一个额外的小设备...

班级前缀

用于创建网格的类前缀都指向关键断点。

• col-xs - 超小（XS - ＆lt; 768px）
• col-sm - 小（SM - 768px）
• col-md - 中（MD - 992px）
• col-lg - 大（LG - 1200px）

您可以使用网格系统创建总共12列。该列本身可以根据您希望它们显示的屏幕大小进行划分，除以类前缀。

  

例如 - 您希望在a上显示分为3列的内容   中型设备屏幕。在这种情况下，您将使用该课程   前缀col-md并将它们分隔为3在您的网页上，   你必须在课程前缀中添加4，因为你正在划分   整个12列分为3部分。那么你的课程将是col-md-4。

您可以通过一些示例详细阅读Bootstrap docs中的所有内容，以便您完全了解其用途。