BootStrap 水平行以及标签和下拉菜单答案

【问题标题】：BootStrap Horizontal row along with label and dropdownBootStrap 水平行以及标签和下拉菜单
【发布时间】：2017-02-14 16:38:01
【问题描述】：

Example of my output

我的设计页面应该包含标签、下拉列表和自动搜索文本框以及一个按钮控件。我正在尝试将整个东西放在水平行中，但它不能正常工作请帮助..

【问题讨论】：

发布您的 HTML 代码
欢迎来到 SO。你需要展示你的代码/努力；就像你到目前为止所尝试的一样。

标签： html twitter-bootstrap

【解决方案1】：

如果没有一些示例代码或有关您已经尝试过的内容、您期望什么以及哪里出了问题的更多信息，很难确切地知道发生了什么，但一般来说，如果您想在一个单一的元素中包含多个元素行，您需要将它们放在具有 col 样式的 div 中。正确的 col 样式将取决于 col 应该占用多少可用空间。在引导程序中，您的行被 12 列划分，因此如果您想要行中有一个元素，列 div 应该包含 col-md-12 的样式。列类的基本命名约定如下； col 的前缀后跟一个连字符，然后是样式应该应用到的显示器的大小（md 表示中，sm 表示小，xs 表示超小），然后是另一个连字符，其中包含div 将占据。这在 bootstraps 官方文档中得到了很好的解释，所以也许可以去那里先快速阅读一下（例如https://getbootstrap.com/examples/grid/）

例如

<div class="row">
    <div class="col-md-2">
      <h4>Example Label</h4>
    </div>
    <div class="col-md-4">
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
            <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>
        </div> 
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control">
    </div>
    <div class="col-md-2">
        <button type="submit" class="btn btn-default">Submit</button>
    </div>
</div>

【讨论】：

【解决方案2】：

这就是我正在尝试的

        <form class ="form-inline" role="form">
             <div class ="form-group">
                <label for="Device">Device Manager</label>
            </div>
            <div class="form-group">
                <asp:DropDownList ID="ddlGroup" runat="server" CssClass="form-control input-sm" AutoPostBack="true" AppendDataBoundItems="true" >
                    <asp:ListItem Text="All" Value="0"></asp:ListItem>
                </asp:DropDownList>
            </div>

            <label class="sr-only" for="inlineFormInputGroup">AutoSearch</label>
            <div class="input-group mb-2 mr-sm-2 mb-sm-0">
              <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Auto Search"/>
                 </div>
            <button type="submit" class="btn-btn-primary">Search</button>

        </form>

【讨论】：

这个片段可能应该添加到问题中而不是答案中。