input-group-btn 中的下拉按钮在右边框被切断

Question

我刚开始使用引导程序（我对这个 Web 开发完全陌生）并设法将下拉菜单与文本输入相结合。

但是，按钮在右边框上以某种方式被切断。文本输入和组合按钮似乎没有足够的空间。

查看我表格的最后一部分：

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label class="col-sm-1 control-label">Parameter</label>
        <div class="input-group col-sm-2">
            <input type="text" class="form-control" placeholder="Value here...">
            <span class="input-group-addon">kg</span>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-1 control-label">Parameter</label>
        <div class="input-group col-sm-2">
            <input type="text" class="form-control" placeholder="Value here...">
            <span class="input-group-addon">km/h</span>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-1 control-label">Type</label>
        <div class="input-group col-sm-2">
            <input type="text" class="form-control" placeholder="Select from dropdown...">
            <div class="input-group-btn">
                <button type="button" class="btn form-control input-group-addon dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                <ul class="dropdown-menu pull-right">
                    <li><a href="#">Option 1</a></li>
                    <li><a href="#">Option 2</a></li>
                    <li><a href="#">Option 3</a></li>
                </ul>
            </div>
        </div>
    </div>
</form>

对于“这是如何工作的？我做错了什么？”之类的问题，我深表歉意。我在 MacOS 上使用 Firefox。

Answer 1

不要与其他组件混合不要混合表单组或网格列 类直接与输入组。相反，嵌套输入组 表单组或网格相关元素的内部。你在混 不应该混合在一起的类。

这个

 <button type="button" class="btn form-control input-group-addon dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>

应该是这样的：

<button type="button" class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span> </button>

这个

<ul class="dropdown-menu pull-right">

应该是。

<ul class="dropdown-menu dropdown-menu-right">

只需使用 CSS 使附加组件颜色相同。我也不会在input-group 类中混合columns。请参阅Docs。

*我更改了此示例的输入的列大小，它们可以轻松更改回或更改为您想要的任何内容。

查看工作片段。

.btn.btn-drop {
  background-color: #eee;
  border: 1px solid #ccc;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<hr>
<div class="container">
  <form class="form-horizontal" role="form">
    <div class="form-group">
      <label class="col-sm-2 control-label">Parameter</label>
      <div class="col-sm-10">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Value here..."> <span class="input-group-addon">kg</span>

        </div>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label">Parameter</label>
      <div class="col-sm-10">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Value here..."> <span class="input-group-addon">km/h</span>

        </div>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label">Type</label>
      <div class="col-sm-10">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Select from dropdown...">
          <div class="input-group-btn">
            <button type="button" class="btn btn-drop dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span>

            </button>
            <ul class="dropdown-menu dropdown-menu-right">
              <li><a href="#">Option 1</a>

              </li>
              <li><a href="#">Option 2</a>

              </li>
              <li><a href="#">Option 3</a>

              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

Answer 2

HTML

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label class="col-sm-1 control-label">Parameter</label>
        <div class="input-group col-sm-2">
            <input type="text" class="form-control" placeholder="Value here...">
            <span class="input-group-addon">kg</span>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-1 control-label">Parameter</label>
        <div class="input-group col-sm-2">
            <input type="text" class="form-control" placeholder="Value here...">
            <span class="input-group-addon">km/h</span>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-1 control-label">Type</label>
        <div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <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>
</div>
    </div>
</form>

小提琴here