twitter-bootstrap - 为什么升级到 Bootstrap 4 后我的列表现不同？

Question

如果我在引导程序 3 中执行以下操作，那么一切都会按预期工作。但它在引导程序 4 中没有正确中断。请执行下面的示例，首先使用 BS4 运行，然后最后使用 BS3。

我希望它看起来像Bootstrap 3.3.6。

#orange_containers .row div {
  background: orange;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="orange_containers" class="">

  <div class="row no-gutters">
    <div class="col-sm-6">
      <div class="col-sm-3">
        <div class="icon">
          A
        </div>
      </div>
      <div class="col-sm-9">
        <div class="text">
          <h4>Test</h4>
          <p>
            I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. If Trump Ipsum weren’t my own words, perhaps I’d be dating it.
          </p>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="col-sm-3">
        <div class="icon">
          B
        </div>
      </div>
      <div class="col-sm-9">
        <div class="text">
          <h4>Test</h4>
          <p>
            The other thing with Lorem Ipsum is that you have to take out its family. We have so many things that we have to do better... and certainly ipsum is one of them. We are going to make placeholder text great again. Greater than ever before.
          </p>
        </div>
      </div>
    </div>
  </div>

</div>

引导程序 4

#orange_containers .row div {
  background: orange;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="orange_containers" class="">

  <div class="row no-gutters">
    <div class="col-sm-6">
      <div class="col-sm-3">
        <div class="icon">
          A
        </div>
      </div>
      <div class="col-sm-9">
        <div class="text">
          <h4>Test</h4>
          <p>
            I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. If Trump Ipsum weren’t my own words, perhaps I’d be dating it.
          </p>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="col-sm-3">
        <div class="icon">
          B
        </div>
      </div>
      <div class="col-sm-9">
        <div class="text">
          <h4>Test</h4>
          <p>
            The other thing with Lorem Ipsum is that you have to take out its family. We have so many things that we have to do better... and certainly ipsum is one of them. We are going to make placeholder text great again. Greater than ever before.
          </p>
        </div>
      </div>
    </div>
  </div>

</div>

注意：您必须全屏查看结果。

在 Bootply 中尝试 Bootstrap 3 示例

在 Bootply 中尝试 Bootstrap 4 示例

标签： twitter-bootstraptwitter-bootstrap-3bootstrap-4

Answer 1

我认为您需要添加一个容器和一些行。此外，您不能将 col 作为另一个 col 的子级，它必须在一行内。有关详细信息，请参见此处：https ://getbootstrap.com/docs/4.4/layout/grid/#nesting

尝试将您的代码更改为以下内容：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div id="orange_containers" class="">

    <div class="container-fluid">

        <div class="row no-gutters">

            <div class="col-sm-6">
                <div class="row">
                    <div class="col-sm-3">
                        <div class="icon">
                            A
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="text">
                            <h4>Test</h4>
                            <p>
                                I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. If Trump Ipsum weren’t my own words, perhaps I’d be dating it.
                            </p>
                            /div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="row">
                    <div class="col-sm-3">
                        <div class="icon">
                            B
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="text">
                            <h4>Test</h4>
                            <p>
                                The other thing with Lorem Ipsum is that you have to take out its family. We have so many things that we have to do better... and certainly ipsum is one of them. We are going to make placeholder text great again. Greater than ever before.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

</div>