Question

我希望我的主要内容区域和导航栏的第一个元素都从左侧开始偏移2rem。但是，这使我对子柱感到非常头痛。

我无法弄清楚如何添加全局偏移量2rem，而不必更改子列的所有计算来解决该更改。示例：

<div class="row">
  <!-- outer content div to offset all content elements --> 
  <div class"col-lg-offset-2">
    <div class="row">

      <!-- shouldn't this refer to the inner row? -->
      <div class="col-lg-6>
        This is 6
      </div> 
      <div class="col-lg-6>
        And 6 more...and content is getting cut-off from the right
      </div> 

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

我希望得到的是继续使用所有子div宽度设置相同的值，并使其尺寸相对于新的父div宽度（小于2rem（或向左））进行比较。

Answer 1

据我所知，设置偏移量时应该设置大小。因此，如果您用.col-lg-*偏移x，则还应使用x减小其大小。

请参阅我的示例：

<div class="row">
  <div id="main" class="col-xs-offset-2 col-xs-10">
    <div class="row">
      <div class="col-xs-6">
          This is 6
      </div>
      <div class="col-xs-6">
          And 6 more...and content is not gettin cut-off from the right
      </div> 
    </div>
  </div>
</div>

所以我要做的是偏移div #main，但我也减小了尺寸以补偿偏移量。假设偏移量为2列，因此大小也减少了2列。因此，col-xs-12不会使用col-xs-10来计算整个宽度，因为它的偏移量为2列。

Answer 2

就像@ jae.phoenix已经说过的那样，一行中的列应始终加起来为12。因此，当您将列偏移2时，另一列应取其他10，除非您想将其居中，然后应记住“应该从另一侧取2英寸的偏移量。该偏移量将保留在该列的另一侧。偏移量也保留在列中，这意味着如果以xs大小应用偏移量，则它将应用于所有在其上方的大小，例如sm md lg xlg;所以记住这一点。这是我的答案：

<div class="container">
<div class="row">
    <div class="col-sm-10 col-sm-offset-2">
        <div class="row">
            <div class="col-sm-6">
                This is 6
            </div>
            <div class="col-sm-6">
                And 6 more...and content is not gettin cut-off from the right
            </div> 
        </div>
    </div>
</div>

保持该列以sm开头偏移量，而不是在屏幕尺寸变小时为xs留一些空间。希望这会有所帮助。

具有全局左偏移内容溢出的Bootstrap 3.3

2 个答案: