html - Bootstrap 表单元素 - 内联组未按预期工作

Question

我正在使用以下代码构建一个小型内联表单组，但它无法正确显示。

它在 jsfiddle 中完美显示但是在我的网页上，它显示如下:

  <form role="form" runat="server">
  <div class="form-group">
    <div class="input-group">
      <span class="input-group-btn input-group-lg">
          <asp:DropDownList ID="ddreg" CssClass="form-control input-lg" runat="server" AppendDataBoundItems="true">
                            <asp:ListItem Text="<Select>" Value="0" />
                        </asp:DropDownList>
                        </span>
      <input type="text" class="form-control" id="comments" placeholder="Enter any comments..." />
      <span class="input-group-btn">
                            <button class="btn btn-default btn-lg" type="submit">Add</button>
                        </span>
    </div>
    <!-- /.input-group -->
  </div>
</form>

HTML源码输出如下:

  <div class="form-group">
    <div class="input-group">
      <span class="input-group-btn input-group-lg">
          <select name="ctl00$ContentPlaceHolder1$ddreg" id="ContentPlaceHolder1_ddreg" class="form-control input-lg">
    <option value="0">&lt;Select&gt;</option>
    <option value="2">2</option>
    <option value="3">3</option>

</select>
                        </span>
      <input type="text" class="form-control" id="comments" placeholder="Enter any comments..." />
      <span class="input-group-btn">
                            <button class="btn btn-default btn-lg" type="submit">Add</button>
                        </span>
    </div>
    <!-- /.input-group -->
  </div>

这一切都进入了一个 asp:ContentPlaceHolder block ，它在我的母版页中是这样的:

<div class="container">
    <!-- Page content here -->
     <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder> 
  <hr />

  <footer>
    <p>&copy; 2016.</p>
  </footer>
</div> <!-- /container -->

Answer 1

首先让我们看看输入组的文档说明:http://getbootstrap.com/components/#input-groups

Textual <input>s only

Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.

Avoid using <textarea> elements here as their rows attribute will not be respected in some cases.

所以现在我们需要取消选择组件的使用，例如使用按钮下拉列表:

<div class="input-group">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div><!-- /btn-group -->
  <input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->

如果您无法使用下拉按钮，让我们看看我们是否可以使用 bootstrap 网格来做到这一点？

<form class="form my-form">
    <div class="col-xs-5">
        <div class="form-group row">
            <select name="ctl00$ContentPlaceHolder1$ddreg" id="ContentPlaceHolder1_ddreg" class="form-control input-lg">
                <option value="0">&lt;Select&gt;</option>
                <option value="2">2</option>
                <option value="3">3</option>
             </select>
         </div>
    </div>
    <div class="col-xs-5">
        <div class="form-group row">
            <input type="password" class="form-control input-lg" id="exampleInputPassword3" placeholder="Password">
        </div>
    </div>
    <div class="col-xs-2">
        <div class="form-group row">
            <button type="submit" class="btn btn-default btn-block btn-lg">Add</button>
        </div>
    </div>
</form>

关闭，但我们需要去掉圆 Angular 并确保所有元素的高度相同:

.my-form .input-lg, .my-form .btn-lg {
  border-radius: 0 !important;
  height: 42px !important;
}

.my-form .input-lg,
.my-form .btn-lg {
  border-radius: 0 !important;
  height: 42px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form my-form">
  <div class="col-xs-5">
    <div class="form-group row">
      <select name="ctl00$ContentPlaceHolder1$ddreg" id="ContentPlaceHolder1_ddreg" class="form-control input-lg">
        <option value="0">&lt;Select&gt;</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </div>
  </div>
  <div class="col-xs-5">
    <div class="form-group row">
      <input type="text" class="form-control input-lg" id="comments" placeholder="Enter any comments...">
    </div>
  </div>
  <div class="col-xs-2">
    <div class="form-group row">
      <button type="submit" class="btn btn-default btn-block btn-lg">Add</button>
    </div>
  </div>
</form>

这是此表单所需的所有 css，我还添加了 !important标记作为 asp.net 知道以讨厌的方式玩输入大小。

希望对你有帮助