Question

所有

这让我疯了。我在Bootstrap容器中有两行。第一行有一列col-8长度，包含一个输入（屏幕截图中的A）。第二行有两列，每列具有col-4长度和单个输入（屏幕截图中的B和C）。直觉上，我认为第一个输入的右边界将与第二行中的第二个输入的右边界对齐（因为8 = 4 + 4）。从视觉上看，情况并非如此（请参见随附的屏幕截图）。

Screenshot

我猜测第二行中的输入有额外的填充，使得它们的组合宽度与第一行不同。使第一个输入的右边框与第二行中第二个输入的右边框对齐的最佳方法是什么？非常感谢提前。

Answer 1

你应该将margin-right:-30px设置为col-8，因为是4 + 4 = 8但是列的左边和右边的边距是15px;

Answer 2

我认为您的网格代码有问题，请查看此示例：

 # ntpdate pool.ntp.org

查看这些页面以更好地理解Bootstrap网格系统和表单布局： http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php

Answer 3

尝试检查一下

<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-8 col-xs-offset-2">
        <div class="form-group">
          <label>A</label>
          <input class="form-control" type="text" />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-4 col-xs-offset-2">
        <div class="form-group">
          <label>B</label>
          <input class="form-control" type="text" />
        </div>
      </div>
      <div class="col-xs-4">
        <div class="form-group">
          <label>C</label>
          <input class="form-control" type="text" />
        </div>
      </div>
    </div>
  </div>
</body>

</html>

在不同行的Bootstrap列中对齐输入

3 个答案: