Question

我已阅读并阅读，并尝试了大量的东西，我即将拔出剩余的头发，可以使用一些建议或另一组眼睛：

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

所以而不是：

LINE＃ PRODUCT QTY

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]

Answer 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

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

1 个答案: