html - Bootstrap 控件布局偏移问题

Question

我有以下 fiddle这是我正在使用 bootstrap 进行样式设计的页面的缩减示例。

注意:查看 fiddle 时，请确保“结果” Pane 的宽度足以让前 3 个控件位于一行中!

我遇到的问题是“自由文本搜索”控件行似乎比我希望的更向右偏移。我希望“自由文本搜索”标签直接位于“商店编号”标签下方且宽度相同。与此同时，我希望相应的输入从“商店编号”输入的开头开始，并在“父类别”选择的末尾结束。

我不太明白 Bootstrap 类哪里出了问题。

这是我的 html:

<form class="form-horizontal">
    <h3 style="padding-left: 20px; padding-bottom: 20px">A pointless title</h3>
    <div class="row form-group">
        <div class="col-md-4">
            <label for="storeNumber" class="col-sm-4 control-label">Store Number</label>
            <div class="col-sm-6">
                <input id="storeNumber" class="form-control" type="text"
                 name="storeNumber" placeholder="Store Number" />
            </div>
        </div>
        <div class="col-md-4">
            <label for="actionedTo" class="col-sm-4 control-label">Actioned To</label>
            <div class="col-sm-6">
                <select id="actionedTo" class="form-control"></select>
            </div>
        </div>
        <div class="col-md-4">
            <label for="parentCategory" 
             class="col-sm-4 control-label">Parent Category</label>
            <div class="col-sm-6">
                <select id="parentCategory" class="form-control"></select>
            </div>
        </div>
    </div>
    <div class="row form-group">
        <div class="col-md-12">
            <label for="freeTextSearch" 
             class="col-sm-2 control-label">Free Text Search</label>
            <div class="col-sm-10">
                <input id="freeTextSearch" class="form-control" type="text"
                 name="requestNumber" placeholder="Free Text Search" />
            </div>
        </div>
    </div>       
</form>

Answer 1

您的总体结构与您的类(class)背道而驰。您正在为您的输入构建内联位置，但您正在使用 form-horizontal并且您正在嵌套列。

您不需要任何标记。只需使用 form-group 类和 columns。

查看工作代码段。

*我添加的 CSS 并不是使一切正常工作所必需的，但我相信它在更大的视口(viewport)上看起来更好。

@media (min-width: 768px) {
  .lg-group {
    margin-top: 25px;
  }
  h3.form-title {
    margin-bottom: 40px;
  }
}

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

<div class="container">
  <nav class="navbar navbar-default">
    <div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap 3 Header</a>

    </div>
  </nav>
</div>
<div class="container">
  <div class="form-group">
    <div class="col-sm-12">
      <h3 class="form-title">A Pointless Title</h3>

    </div>
  </div>
  <form class="myForm">
    <div class="form-group">
      <label for="storeNumber" class="col-sm-2 control-label">Store Number</label>
      <div class="col-sm-2">
        <input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" />
      </div>
    </div>
    <div class="form-group">
      <label for="actionedTo" class="col-sm-2 control-label">Actioned To</label>
      <div class="col-sm-2">
        <select id="actionedTo" class="form-control" name="actionedTo"></select>
      </div>
    </div>
    <div class="form-group">
      <label for="parentCategory" class="col-sm-2 control-label">Parent Category</label>
      <div class="col-sm-2">
        <select id="parentCategory" class="form-control" name="parentCategory"></select>
      </div>
    </div>
    <div class="clearfix"></div>
    <div class="form-group lg-group">
      <label for="requestNumber" class="col-sm-2 control-label">Free Text Search</label>
      <div class="col-sm-10">
        <input id="freeTextSearch" class="form-control" type="text" name="requestNumber" placeholder="Free Text Search" />
      </div>
    </div>
  </form>
</div>

多个控件的替代布局

@media (min-width: 768px) {
  .lg-group {
    margin-top: 25px;
  }
  h3.form-title {
    margin-bottom: 40px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <nav class="navbar navbar-default">
    <div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap 3 Header</a>

    </div>
  </nav>
</div>
<div class="container">
  <div class="form-group">
    <div class="col-sm-12">
      <h3 class="form-title">A Pointless Title</h3>

    </div>
  </div>
  <form class="myForm">
    <div class="row">
      <div class="col-sm-12">
        <div class="lg-group">
          <div class="form-group">
            <label for="storeNumber" class="col-sm-2 control-label">Store Number</label>
            <div class="col-sm-2">
              <input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" />
            </div>
          </div>
          <div class="form-group">
            <label for="actionedTo" class="col-sm-2 control-label">Actioned To</label>
            <div class="col-sm-2">
              <select id="actionedTo" class="form-control" name="actionedTo"></select>
            </div>
          </div>
          <div class="form-group">
            <label for="parentCategory" class="col-sm-2 control-label">Parent Category</label>
            <div class="col-sm-2">
              <select id="parentCategory" class="form-control" name="parentCategory"></select>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <div class="lg-group">
          <div class="form-group">
            <label for="storeNumber" class="col-sm-2 control-label">Store Number</label>
            <div class="col-sm-2">
              <input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" />
            </div>
          </div>
          <div class="form-group">
            <label for="actionedTo" class="col-sm-2 control-label">Actioned To</label>
            <div class="col-sm-2">
              <select id="actionedTo" class="form-control" name="actionedTo"></select>
            </div>
          </div>
          <div class="form-group">
            <label for="parentCategory" class="col-sm-2 control-label">Parent Category</label>
            <div class="col-sm-2">
              <select id="parentCategory" class="form-control" name="parentCategory"></select>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-12">
      <div class="row">
        <div class="form-group lg-group">
          <label for="requestNumber" class="col-sm-2 control-label">Free Text Search</label>
          <div class="col-sm-10">
            <input id="freeTextSearch" class="form-control" type="text" name="requestNumber" placeholder="Free Text Search" />
          </div>
        </div>
      </div>
    </div>
  </form>
</div>