Bootstrap - 仅查看横向

Bootstrap 是一个流行的前端框架，它可以快速地构建具有响应式布局的网站。在 Bootstrap 中，我们可以使用栅格系统轻松地实现横向和纵向的布局。本文将重点介绍如何仅查看横向布局。

栅格系统

Bootstrap 的栅格系统是其最强大的功能之一。栅格系统基于一个12列网格布局，可以让我们轻松地创建响应式布局。栅格系统可以分为以下几个部分：

• .container - 所有栅格系统的父容器，它包含整个页面的布局。可以通过 .container-fluid 来创建一个全宽度容器。
• .row - 栅格系统的行，每个 row 分为12列，可以在这一行中布置各种栅格列。
• .col-* - 栅格系统的列，可以在 .row 中使用。* 代表列占据了多少个栅格。例如，.col-sm-6 表示在小型屏幕设备上，这个列占据了6个栅格。

横向布局

要查看 Bootstrap 的横向布局，我们需要创建一个 .container，并在其中添加一个 .row 和一些 .col 列。下面是一个例子：

<div class="container">
  <div class="row">
    <div class="col-sm-4">Column 1</div>
    <div class="col-sm-4">Column 2</div>
    <div class="col-sm-4">Column 3</div>
  </div>
</div>

在这个例子中，我们创建了一个 .container，并在其中添加了一个 .row 和三个 .col-sm-4 列。这意味着在小尺寸屏幕上，每列占据了 4 个栅格，并且它们将垂直并排放置。

仅查看横向

要仅查看 Bootstrap 的横向布局，我们需要使用一些 CSS 样式。下面是一些样式示例：

@media (max-width: 767px) {
  .row > [class^="col"] {
    display: block;
  }
}

这里，我们使用媒体查询来检测屏幕宽度是否小于或等于 767 像素。如果是，我们使用以上 CSS 代码来让每列占据整个宽度，并且它们将竖直堆叠。这样，我们就仅能看到横向的布局。

结论

Bootstrap 的栅格系统是一个非常强大的工具，可以帮助我们快速创建响应式布局。通过使用一些 CSS 样式，我们可以轻松地仅查看横向布局。希望本文能对你有所帮助！