Question

我刚刚开始使用bootstrap（我对这个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>

抱歉＆＃34;这是如何工作的？我做错了什么？＆＃34; - 问题的问题。我在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即可使附加组件具有相同的颜色。我也不会在columns课程中混合input-group。请参阅Docs。

*我更改了此示例的输入列大小，可以轻松地将其更改回来或改为任何你想要的。

请参阅工作代码段。

＆＃13;

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

＆＃13;

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

＆＃13;

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

input-group-btn中的下拉按钮在右边界处被截断

2 个答案: