Question

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

  <!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>

Answer 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">您可以根据引导程序的网格系统更改width的{{1}}。该div有4个类。

div当col-lg-12屏幕大于width时，系统会识别此类。您可以相应地更改号码。 1200px将是网格系统的完整大小，12将是网格系统完整大小的一半，6是网格系统全尺寸的3/4

4

col-sm-12

width会被识别。同样的规则适用于数字。

768px

col-md-12

width。数字的规则相同。
992px si识别屏幕col-xs-12是否小于width移动设备。此处的所有网格编号等同于网格系统的完整大小。例如，如果您使用768px，则宽度将与使用col-xs-12时的宽度相同100％，对于2,3,4等也是100％相同。

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

您也可能想要考虑李先生的评论。他是对的。在任何情况下，您需要任何col-xs-1网格与其他屏幕尺寸相同，只需采用最小类。例如：

这是正确的 - col

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

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

如何创建Bootstrap嵌套网格？

1 个答案: