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块，在我的母版页中就像这样：

<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

仅文字<input>

避免在此处使用<select>元素，因为它们无法在WebKit浏览器中完全设置样式。

避免在此处使用<textarea>元素，因为在某些情况下，不会尊重其行属性。

所以现在我们需要使用select组件，并使用按钮下拉菜单，例如：

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

关闭，但我们需要摆脱圆角并确保所有元素都是相同的高度：

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

＆＃13;

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

＆＃13;

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

＆＃13;

这是此表单所需的全部css，我还添加了!important标记，因为asp.net知道以令人讨厌的方式使用输入大小。

希望这有帮助

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

1 个答案: