Question

有没有办法使用bootstrap创建工具栏，我可以在其中添加下拉列表，文本和提交按钮。我查看了bootstrap组件但找不到一个。我有以下组件，我想在一个工具栏中分组。

HTML：

  <div class="row">
    <div class="col-md-4">
        <h4 class="label-dropdown">Name:</h4>
            <div class="btn-group dropdown">
                <button class="btn btn-default" type="button">Default</button>
                <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul role="menu" class="dropdown-menu">
                   <li><a href="#">Pradeep</a></li>
                   <li><a href="#">Praveen</a></li>
                   <li><a href="#">Vinod</a></li>
                   <li><a href="#">Ramesh</a></li>
                </ul>
            </div><!-- /btn-group -->
        <h4 class="label-dropdown">Environment:</h4>
        <div class="btn-group dropdown">
                <button class="btn btn-default" type="button"Environment</button>
                <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul role="menu" class="dropdown-menu dropdown-menu-left">
                    <li><a href="#">item1</a></li>
                    <li><a href="#">item2</a></li>
                    <li><a href="#">item3</a></li>
                    <li><a href="#">item4</a></li>
                </ul>
            </div><!-- /btn-group -->
    </div>
      <div class="col-md-6">
          <div class="input-group">
              <input type="text" class="form-control" placeholder="Core Ratio">
          </div>
      </div>
</div>

CSS：

.label-dropdown{
  display: inline;
}

特此附上jsfiddle链接以获取更多详细信息：jsfiddle。

注意：我添加了一个名为`label-dropdwon的自定义类来修复，但不知何故id不能得到我想要的东西。

如果我错过了什么，请告诉我。

Answer 1

很难准确地通过您的描述来说明，但这可能是您正在寻找的......

<div class="navbar navbar-default navbar-static-top">
 <div class="navbar-header">

   <!-- FORM -->
   <form class="navbar-form">

     <!-- Split button -->
      <div class="btn-group">   
        <button type="button" class="btn btn-default">Action</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          <span class="caret"></span>
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>

     <!-- INPUTS -->
    <input type="text" class="form-control">
    <button type="submit" class="btn btn-default">Submit</button>
   </form>

 </div>
</div>

示例：http://www.bootply.com/2wQ12k3dt6

全部都在Bootstrap docs，但需要将几件拼凑在一起并进行实验......

用于保存下拉列表和文本框的bootstrap组件

1 个答案: