bootstrap-select - 标签和下拉选择框垂直对齐，而不是水平对齐答案

【问题标题】：bootstrap-select - label and dropdown select box align vertical, not horizontalbootstrap-select - 标签和下拉选择框垂直对齐，而不是水平对齐
【发布时间】：2016-09-03 04:37:43
【问题描述】：

我已经阅读和阅读，尝试了很多东西，我即将拔掉我剩下的头发，可以使用一些建议或另一双眼睛：

使用 bootstrap 3.3.7，我有一个正在工作的下拉框并且样式很好，但标签 AND 下拉列表彼此相邻。

所以不是：

LINE#产品数量

1 [机械] 10 [一排标签，一排数值]

...我明白了：

LINE# PRODUCT [Mechanical] [产品标签 AND 同一行的下拉菜单]

QTY

1 10

LABEL 和 DROPDOWN 在同一行中彼此相邻，而不是 LABEL 与其他 LABEL 处于同一级别，并且 DROPDOWN 与表单的其余部分位于同一行输入字段。

        <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:400,700' />
        <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</script>  
        <script src="http://localhost/f1x/wp-content/themes/MyProduct/js/bootstrap-select.js"></script>  
        <link rel='stylesheet' href='http://localhost/f1x/wp-content/themes/MyProduct/css/bootstrap.css' />
        <link rel='stylesheet' href='http://localhost/f1x/wp-content/themes/MyProduct/css/bootstrap_extend.css' />
        <link rel='stylesheet' href='http://localhost/f1x/wp-content/themes/MyProduct/css/bootstrap-select.css' />            

    </head>
    <body>
        <header class="header">
          ...
        </header>
        <div class="main">
            <div class="container">
                <div class="row">
                    <form class="form">
                        <div class="col-xs-16 col-md-16">                             
                            <div class="row" id="entryrow">
                                <div class="col-xs-01" id="lin">
                                    <label class="control-label" for="lin">LIN#</label>
                                    <input type="text" id="lin" readonly class="form-control" placeholder="1">
                                </div>                                     
                                <div class="form-group">
                                    <label for="prd_" class="col-lg-2 control-label">PRODUCT</label>
                                    <div class="col-lg-2" class="selectpicker control-label">
                                        <select id="prd_" class="form-control" name="prd_">
                                            <option value="na" selected="">Choose One:</option>
                                            <option value="service">Structural Square</option>
                                            <option value="suggestions">Structural Rectangular</option>
                                            <option value="support">Pipe</option>
                                            <option value="support">Mechanical Square</option>
                                            <option value="support">Mechanical Rectangular</option>
                                            <option value="support">Mechanical Round</option>
                                            <option value="other">Other</option>
                                        </select>
                                    </div>
                                </div>                                      
                                <div class="col-xs-1">
                                    <label for="qty_" class="control-label">QTY</label>                                          
                                    <input type="text" id="qty_" class="form-control" placeholder="0">
                                </div>[bootstrap dropdown horizontal, not vertical][1]

【问题讨论】：

你能设置一个小提琴吗？
小提琴：jsfiddle.net/48975bo7
清理了它，它在这里工作：jsfiddle.net/ughgaL6b

标签： twitter-bootstrap bootstrap-select

【解决方案1】：

从你的小提琴：

<div class="form-group">
  <label for="prd_" class="col-lg-2 control-label">PRODUCT</label><br>
  <div class="col-lg-2" class="selectpicker control-label">
    <select id="prd_" class="form-control" name="prd_">
      <option value="na" selected="">Choose One:</option>
      <option value="service">Structural Square</option>
      <option value="other">Other</option>
    </select>
  </div>
</div>

您的样式存在一些问题。即，您的 col 大小使用不一致。还有一个类的实例在一个元素中定义了两次。我添加了 col-md 并调整了您的 col-xs 尺寸，使它们增加到 12。我还删除了您在产品下拉列表中使用的 col-lg-2 尺寸，因为它们会破坏大屏幕上的显示。根据您的问题，我相信这就是您想要实现的目标：

见updated fiddle

【讨论】：