html - 如何让这两个 div 水平对齐并保持表单组完整？

Question

如何让这两个 div 水平对齐并保持 form-group完好无损？

无论我执行何种 col-ms-sizing，两个输入组都不会在同一行上对齐，我相信这只是因为 form-group 的缘故。类。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="container-fluid" ng-controller="PriceController as formCtrl">
    <form class="form-horizontal" role="form" ng-submit="processForm()">
      <div class="form-group">
        <label for="inputPrice" class="col-sm-1 control-label">Price</label>
        <div class="col-sm-5 input-group"> <span class="input-group-addon">$</span>

          <input type="text" class="form-control" id="inputPrice" name="inputPrice"> <span class="input-group-addon">.95</span>

        </div>
        <label for="inputDate" class="col-sm-1 control-label">Date</label>
        <div class="col-sm-5 input-group">
          <input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date">
          <div class="input-group input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
              <li><a href="#" id="dateToday">Today</a>
              </li>
              <li><a href="#" id="dateTomorrow">Tomorrow</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
  </div>
</div>
</div>

Answer 1

确保用 <div class="row"> 包装您的输入然后分开 divs对于 col-sm-*类。我替换了 col-sm-*与 col-xs-*以确保代码段不会换行。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="container-fluid" ng-controller="PriceController as formCtrl">
    <form class="form-horizontal" role="form" ng-submit="processForm()">
      <div class="form-group">
        <div class="row">
          <div class="col-xs-1">
            <label for="inputPrice" class="control-label">Price</label>
          </div>
          <div class="col-xs-5">
            <div class="input-group"> <span class="input-group-addon">$</span>

              <input type="text" class="form-control" id="inputPrice" name="inputPrice"> <span class="input-group-addon">.95</span>

            </div>
          </div>
          <div class="col-xs-1">
            <label for="inputDate" class="control-label">Date</label>
          </div>
          <div class="col-xs-5">
            <div class="input-group">
              <input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date">
              <div class="input-group input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                  <li><a href="#" id="dateToday">Today</a>
                  </li>
                  <li><a href="#" id="dateTomorrow">Tomorrow</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>