Bootstrap CSS - 第 2 列下的第 3 列调整大小

Question

这是我的示例 HTML 页面。在调整大小时，我要求先在Column2下显示Column3，进一步缩小屏幕宽度时，在Column1下显示Column2下的Column3。

Column1    Column2    Column3

关于调整阶段 1（平板电脑宽度）

Column1   Column2
          Column3

进一步调整大小（移动宽度）

Column1
Column2
Column3

我当前的代码：

<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>

<body>
  <div class="jumbotron text-center">
    <h1>My First Bootstrap Page</h1>
    <p>Resize this responsive page to see the effect!</p>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <h3>Column 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>
      <div class="col-sm-4">
        <h3>Column 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>
      <div class="col-sm-4">
        <h3>Column 3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

要达到这样的目的你应该使用offset。 offset 属性将使用您想要的设置推或拉元素。

如何处理？

为了得到你想要的东西，你应该将你的断点分成 3 个主要断点（所以我只使用了 md、sm、xs，它们是bootstrap 3.4)。然后我通过确定每列的 col-md-4 告诉 bootstrap 我想要连续 3 列。然后我告诉他们，当 window 宽度较小 col-xs-12 时，我希望他们每个人都填满一整行。棘手的是告诉 bootstrap 我希望在小型设备（不是超小型 xs）的每一行中有 2 列，所以我选择了 col-sm-6。然后我必须指定我想将我的第三列推到一整列然后我使用 col-sm-offset-6 然后确保 offset 不会花很长时间进入下一个断点我刚刚声明了这个 -两个 col-md-offset-0 以确保中型设备 (md) 中的偏移量为 none.

所以你的最终代码应该是这样的：

<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>

<body>
  <div class="jumbotron text-center">
    <h1>My First Bootstrap Page</h1>
    <p>Resize this responsive page to see the effect!</p>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-md-4 col-sm-6 col-xs-12">
        <h3>Column 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12">
        <h3>Column 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>
      <div class="col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-6 col-xs-12">
        <h3>Column 3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>
    </div>
  </div>
</body>

</html>

注意： 您可以阅读更多关于 offset here.

Bootstrap CSS - 第 2 列下的第 3 列调整大小

Bootstrap CSS - Column 3 under Column 2 on resizing

css

twitter-bootstrap-3

如何处理？