Question

我有一个菜单和一个包含文字的区域。我的目标是将菜单中单词“Two”的左边缘与文本区域中的单词“Four”对齐。我认为使用bootstrap和列偏移它会很容易，但它并不完全排队。我不明白为什么，列类及其偏移对应物是否应该具有相同的余量和填充量？

<div class="container-fluid">
        <div class="row">
            <div class="col-xs-2">One</div>
            <div class="col-xs-2">Two</div>
            <div class="col-xs-2">Three</div>
        </div>
        <div class="row">
            <div class="col-xs-offset-1 col-xs-10">
                <div class="col-xs-offset-1 col-xs-1">
                    Four
                </div>
            </div>
        </div>
</div>

Answer 1

如果您想将two与four对齐，那么只需将four包含在一个带有<div class="col-xs-offset-2 col-xs-1">类的div中

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      
       
       </head>
       <body>
       
     

<div class="container-fluid">
        <div class="row">
            <div class="col-xs-2">One</div>
            <div class="col-xs-2">Two</div>
            <div class="col-xs-2">Three</div>
        </div>
        <div class="row">
            
                <div class="col-xs-offset-2 col-xs-1">
                    Four
               
            </div>
        </div>
</div>
</body>
</html>

Answer 2

默认情况下，.col-*-*个类有padding: 0 15px;，与.row s margin: 0 -15px配对。因此，您需要为.row的第二级提供另一个.col-*-*作为父级：

<div class="row">
  <div class="col-xs-offset-1 col-xs-10">
     <div class="row">
        <div class="col-xs-offset-1 col-xs-1">
          Four
        </div>
     </div>
  </div>
</div>

请注意，.col-*-*内的嵌套.col-xs-10的宽度相对于其父级而言将与其中一级相等。

Answer 3

文本区域中有一个额外的div（带有类行的第二个div）。请删除它并使用col-xs-offset-2

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-2">One</div>
        <div class="col-xs-2">Two</div>
        <div class="col-xs-2">Three</div>
    </div>
    <div class="row">

            <div class="col-xs-offset-2 col-xs-1">
                Four
            </div>

    </div>

排队引导列

3 个答案: