Question

我有以下fiddle这是我正在使用bootstrap进行样式处理的页面的简化示例。

注意：查看小提琴时，请确保“结果”窗格足够宽，以便在单行上显示前3个控件！

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

我无法确定我在引导类中出错了。

这是我的HTML：

ServiceContract

Answer 1

您的一般结构与您的课程相反。您正在构建输入以定位内联，但您正在使用form-horizontal并且您正在嵌套columns。

你不需要任何标记。只需使用form-group课程和columns。

查看工作代码段。

*我已经添加的CSS并不需要让一切正常运行，但我相信它在使用它的大型视口上看起来更好。

＆＃13;

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

＆＃13;

<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>

＆＃13;

多个控件的替代布局

＆＃13;

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

＆＃13;

<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>

＆＃13;

Bootstrap控制布局偏移问题

1 个答案: