Question

我正在尝试学习bootstraps网格系统。根据我对网格系统的理解，下面的代码应该产生2列。一列左侧有3行，右侧有一行有一行，它们永远不应该堆叠。不幸的是，事实并非如此，而不是永远堆叠，它们总是堆叠在一起，无论我尝试什么，我都无法得到我想要的结果。有没有人看到这个代码的任何问题，还是我需要深入研究的东西？

我认为它可能与我的显示/视口大小有关，但http://viewportsizes.com/mine/表示我的视口大小为1707 x 961，据我所知，它不应该小到足以强制列堆叠。

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Overhead</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="col-6">
            <div class="row">
                Top Left
            </div>
            <div class="row">
                Middle Left
            </div>
            <div class="row">
                Bottom Left
            </div>
        </div>
        <div class="col-6">
            Right
        </div>
    </div>
</body>

Answer 1

您应首先在列之前定义行。例如，下面的代码将创建一行和2个相等的列。

<body>
    <div class="container">    
      <div class="row">
        <div class="col-md-6">

            </div>     
        <div class="col-md-6">

        </div>
    </div>
</body>

这是bootply小提琴链接 https://www.bootply.com/WtWRhCVl8e

Answer 2

列进入行，你可以反过来。例如：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      left column 
    </div>
    <div class="col-md-6">
      right column
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      left column 
    </div>
    <div class="col-md-4">
      middle column
    </div>
    <div class="col-md-4">
      right column
    </div>
  </div>
</div>

这将创建两行，顶行包含两列，每行占50％，底行包含三列，每行占33.33％。

我希望这会有所帮助。

Answer 3

一行的元素两侧的负边距为-15px。一列的两侧有一个15px的正填充，以匹配该行创建的负边距。因此，当您创建一行时，应紧跟一列。

我认为你正在寻找下面的那个。

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <div class="row">
        <div class="col-xs-12">
          Row 1 on Col 1
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          Row 2 on Col 2
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          Row 3 on Col 3
        </div>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="row">
        <div class="col-xs-12">
          Row 1 on Col 2
        </div>
      </div>
    </div>
  </div>
</div>

看一下我为你创建的这支笔。

Answer 4



    <div class="row">
      <div class="col-md-6">
        Left column
      </div>

      <div class="col-md-6">
        Middle Column
      </div>

      <div class="col-md-6">
        Right Column
      </div>
    </div>

Bootstrap列堆叠时不应该堆叠

4 个答案: