为什么我的按钮和链接自然不会落在输入下面？

Question

我想将Have an account?，Login按钮和Link A Link B直接放在something something something something，Enter Zip Code输入字段和Enter Zip Code按钮下面。

我设置我的Bootstrap（版本3.3.7）和HTML的方式，我认为它会出现在下面，但它实际上显示的与我期望的完全相反。相反，它在左侧一直如下图所示。

为什么要执行这种行为？如果需要更多信息，请告诉我。

picture of what I'm describing

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="col-7">
    <form class="pull-right col-12 zipSection">
      <h6 class="pull-right">something something something something</h6>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Enter Zip Code">
      </div>
      <button type="submit" class="btn btn-default center-block enterZipCodeButton">Enter Zip Code</button>
    </form>

    <div class="col-12">
      <p class="col-12">Have an account?</p>
      <button type="submit" class="loginButton" onclick="document.location = '/'">Login</button>
      <a href="#">Link A</a>
      <a href="#">Link B</a>
    </div>
  </div>
</div>

Answer 1

您的表单有一个名为pull-right的类（在Bootstrap 4中已重命名为float-right）。这样做会迫使div到最右边。由于这是bootstrap，所以其他所有内容都会适应，这意味着理论上应该处理的div被强制上升到顶行和左边（因为左对齐是默认值）。解决方法是使用row中的Bootstrap grid system类。你想要的每一行，你用一个row类创建一个新的div。这样，他们现在就会彼此相依为命。

然而，Have an account?仍然在左边。要解决这个问题，请给它一类pull-right。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-7">
      <form class="pull-right col-12 zipSection">
        <h6 class="pull-right">something something something something</h6>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Enter Zip Code">
        </div>
        <button type="submit" class="btn btn-default center-block enterZipCodeButton">Enter Zip Code</button>
      </form>
    </div>
  </div>
  <div class="row">
    <div class="col-12 pull-right">
      <p class="col-12">Have an account?</p>
      <button type="submit" class="loginButton" onclick="document.location = '/'">Login</button>
      <a href="#">Link A</a>
      <a href="#">Link B</a>
    </div>
  </div>
</div>