Question

我是bootstrap的新手。我正在创建一个水平表单，其中我需要一个按钮下拉列表放在左边，一个输入文本放在右边。我编写了代码，但由于某种原因，按钮下拉列表出现在右侧，输入文本出现在左侧。以下是代码：

<div class="form-group">
  <div class="btn-group">
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  Categories <span class="caret"></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>
<div class="col-sm-offset col-sm-10">
  <input type="text" class="form-control" placeholder="Enter Debate Name">
</div>

我错过了什么？

Answer 1

原因是btn-group div没有列可以坐在里面。进行此更改：

<form class="form-horizontal" role="form">
    <div class="col-sm-2"> <!--Wrap this button group in a col -->
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                Categories <span class="caret"></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>
    </div> <!-- /col-sm-2 -->
    <div class="col-sm-10"> <!--Offsets work like cols they require a value for how many cols to offset -->
        <input type="text" class="form-control" placeholder="Enter Debate Name">
    </div>
</form>

使用Bootstrap＆＃39;开箱即用时，＆＃39;所有col值的组合应该加起来为12.包括任何偏移量。如果它们加起来超过12，那么最后一个col将会换行。如果小于12，就会有差距。由于cols浮动左侧应用于它们，在您的情况下，col-sm-10的div向左浮动并占用10个网格列，允许2为空。因为没有什么可以清除漂浮物，所以btn-group div漂浮在它旁边。

另外，请注意，如果要使用偏移量，它们的行为类似于列并占用特定数量的网格列。这意味着您需要告诉他们有多少列这样：.col-md-offset-*用数字替换*。如果您想在示例中使用偏移量，可以将上面的内容更改为：

<div class="col-sm-9  col-sm-offset-1"> <!--2 grid cols for the button group + 9 + 1 for the input = 12 -->
    <input type="text" class="form-control" placeholder="Enter Debate Name">
</div>

最后，您应该注意，类的-sm-部分意味着对于宽度超过767px的所有屏幕，您的列的行为将如此，低于该按钮将位于输入的顶部。

带有输入文本的Bootstrap按钮下拉列表

1 个答案: