非中心的引导偏移列答案

【问题标题】：Bootstrap offsetting columns that are not central非中心的引导偏移列
【发布时间】：2018-07-01 18:52:50
【问题描述】：

这是我第一次使用 Bootstrap，我在尝试让我的内容集中时遇到了一些问题。

我想包含内容宽度，但允许背景颜色在页面的整个宽度上流动。我曾尝试偏移列，但这只会导致内容两侧的间距不均匀。

我当前的标记在这里：

https://codepen.io/charlyanderson/pen/bKggyb?editors=1100

<div class="container-fluid">
    <div class="row">

        <div id="example-col-1" class="col-lg-5">
            <div class="row">
                <div class="col-lg-8 offset-md-4">
                    <p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
                </div>            
            </div>
        </div>

        <div id="example-col-2" class="col-lg-7">
            <div class="row">
                <div class="col-lg-8">
                    <p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
                </div>
            </div>
        </div>

    </div>
</div>

【问题讨论】：

标签： css bootstrap-4

【解决方案1】：

对第一个内列使用ml-auto，对第二个内列使用mr-auto。

#example-col-1 {
  background-color: beige;
}

#example-col-2 {
  background-color: pink;
  text-align: right;
}

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div id="example-col-1" class="col">
        <div class="row">
          <div class="col-lg-8 ml-auto">
            <p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
              Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
          </div>
        </div>
      </div>

      <div id="example-col-2" class="col">
        <div class="row">
          <div class="col-lg-8 mr-auto">
            <p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
              Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
          </div>
        </div>
      </div>

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

</html>

https://codepen.io/anon/pen/BVpWwo

在第一个内列之前和第二个内列之后使用一个虚拟 col-lg-4 列。

#example-col-1 {
  background-color: beige;
}

#example-col-2 {
  background-color: pink;
  text-align: right;
}

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div id="example-col-1" class="col">
        <div class="row">
          <div class="col-lg-4"></div>
          <div class="col-lg-8">
            <p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
              Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
          </div>
        </div>
      </div>

      <div id="example-col-2" class="col">
        <div class="row">
          <div class="col-lg-8">
            <p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada.
              Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
          </div>
          <div class="col-lg-4"></div>
        </div>
      </div>

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

</html>

https://codepen.io/anon/pen/jKyBwy

您可能会发现这个问题也很有用。

Offsetting columns is not working (Bootstrap v4.0.0-beta)

更新

如果您希望左列较小而右列较大，请使用此代码。

#example-col-1 {
  background-color: beige;
}

#example-col-2 {
  background-color: pink;
}

<html>
  
  <head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  </head>
  
  <body>

<div class="container-fluid">
  <div class="row">
    <div id="example-col-1" class="col-5">
      <div class="row">
        <div class="col-lg-4"></div>
        <div class="col-lg-8">
          <p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
        </div>            
      </div>
    </div>
    
    <div id="example-col-2" class="col-7">
      <div class="row">
        <div class="col-lg-9 text-right">
          <p>Fusce maximus, elit non mollis consectetur, neque nisi iaculis est, suscipit feugiat magna urna suscipit mauris. In hac habitasse platea dictumst. Vestibulum efficitur dui in ultricies placerat. Etiam nec ipsum ac lectus finibus malesuada. Vestibulum varius pretium ipsum imperdiet condimentum. Curabitur tincidunt maximus auctor. Donec vulputate mollis ligula, a pellentesque tortor tincidunt non.</p>
        </div>
        <div class="col-lg-3"></div>
      </div>
    </div>

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

顺便说一句，最好使用text-right 而不是text-align: right; 样式。

【讨论】：

非常感谢。但是，除非您有相等的列，否则它似乎不起作用。我的标记是左列更小，右列更大。
@CharlyAnderson 我认为它有效。你只需要使用正确的col-* 类。检查更新