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强制推到最右边。由于这是引导程序，因此所有其他内容都会适应，这意味着从理论上讲应该在其下面的div会被强制向上移动到顶部行，然后向左移动（因为默认为left-alignment）。一种解决方案是使用Bootstrap grid system中的row类。您想要的每一行都将创建一个新的带有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>

为什么我的按钮和链接自然不属于输入内容？

1 个答案: