如何创建 Bootstrap 嵌套网格？ [关闭]答案

【问题标题】：How to create a Bootstrap nested Grid? [closed]如何创建 Bootstrap 嵌套网格？ [关闭]
【发布时间】：2015-05-09 00:29:12
【问题描述】：

我正在尝试将我的页面分成两列。我遵循示例代码，它仍然保留在一列中。接下来我该怎么办？谢谢。

  <!DOCTYPE html>
<?php session_start(); ?>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-6">
           <table class="table table-bordered">
            <legend>Manage</legend>
          </table>
</div>
        <div class="col-md-6">
          <table class="table table-bordered">
            <legend>Special Functions</legend>
          </table>
</div>
        </div>
          </div>
  </body>
</html>

【问题讨论】：

在这里工作...bootply.com/2U4TjwqcKR 当然假设您的窗口在使用-md- 类时比992px 宽
您确定您的 CSS 文件包含在正确的路径中吗？
是的。我对这条路很确定。我很困惑，我看到你的代码正在工作。但我不知道我缺少什么。
在我看来，您的 CSS 文件路径是问题所在。我把确切的代码扔到我的本地开发服务器上，它运行良好。尝试将路径更改为<link href="./css/bootstrap.min.css" rel="stylesheet" media="screen">，看看是否有帮助。
感谢您的回答。 CSS文件是问题所在。我替换它。它有效。

标签： php css twitter-bootstrap

【解决方案1】：

考虑一下。你的代码是完全正确的，除了你错过了一些课程。请参阅下面的说明。网格系统不一定需要您自己的media-query。

<div class="container">
      <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <table class="table table-bordered">
              <legend>Manage</legend>
            </table>
          </div>

          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <table class="table table-bordered">
              <legend>Special Functions</legend>
            </table>
          </div>
     </div>
</div>

说明

在这一行：<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 您可以根据引导程序的网格系统更改div 的width。该div上有4个类。

col-lg-12 当width 屏幕大于1200px 时，该类被识别。您可以相应地更改数字。 12 是网格系统的全尺寸，6 是网格系统全尺寸的一半，4 是网格系统全尺寸的 3/4，等等。
当屏幕width 等于或大于768px 时识别col-sm-12。相同的规则适用于数字。
当屏幕width 大于992px 时识别col-md-12。数字规则相同。
col-xs-12 可以识别屏幕width 是否小于768px 因此移动设备。这里所有的网格数都相当于网格系统的全尺寸。例如，如果您使用 col-xs-12，宽度将与使用 col-xs-1 时 100% 相同，2、3、4 等也将 100% 相同。

您实际上不需要包含所有这些不同的类，因为 Bootstrap 会采用您拥有的任何类，并将其应用于任何可用的更大类。如此有效，您只需设置最低等级（如果上面的所有其他等级都相同） - Lee

您可能还想考虑李先生的评论。他是对的。在任何情况下，您需要任何col 网格与其他屏幕尺寸相同，只需选择最低级别即可。例如：

这是正确的 - <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

但这更好更短 - <div class="col-xs-12 col-sm-6">

Bootstrap 将采用最小类并将其应用于其他屏幕尺寸或媒体查询。

【讨论】：

我喜欢你的回答:)
您实际上不需要包含所有这些不同的类，因为 Bootstrap 会采用您拥有的任何类，并将其应用于任何可用的更大类。如此有效，您只需设置最低等级（如果上面的所有其他等级都相同）。
谢谢@MohammadAnini :)
不，你没有。但是为了安全起见，如果您可能需要动态页面，那么如果您正在开发一个适合移动设备的网站，则最好拥有所有这些类。如果您只使用最小类，如果您需要为更大的设备和监视器自定义网格，那将是一个问题，您最终将编写自定义css 只是为了自定义网格系统，而您可以立即声明它们以避免给日后编辑带来不便。只是我的观点和意见，但我也同意你的看法。谢谢你指出这一点。 @Lee :)
@GreenFox 然后，您可以在需要它们的时间和地点添加它们......您并不总是需要每次都使用每个尺寸等级。您对最初问题的回答，不需要全部包括在内，您说“使用这个”。我只是觉得这有点不必要。