基于引导程序的选择框之间的空间

Question

我正在开发一个响应式表格 我有3个选择。
桌面视图：

移动视图：

我希望在选择之间的移动视图中有更多空间 我怎么能这样做？
这是我的HTML：

＆＃13;

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
   <div class="row">
                            <div class="hidden-xs col-md-2" style="width:9.8%">
                                <label for="nose">choose:</label>
                            </div>
                            <div class="col-xs-12 col-md-2"  >
                                <select class="form-control" >
                                    <option  value="1">aaaaaaaaa</option>
                                </select>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-2" >
                                <select class="form-control">
                                    <option value="1">bbbbbbbbb</option>
                                   

                                </select>
                               
                            </div>
                            <div class="col-xs-12 col-md-2"  >
                                <select class="form-control">
                                    <option value="1">cccccccccc</option>
                                </select>
                               
                            </div>
                             
                      </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用媒体查询，您可以为每个元素添加一些margin-bottom，如下所示：

＆＃13;

＆＃13;

@media screen and (max-width: 1280px) {
   .col-xs-12 .col-md-2 {
       margin-bottom : 5px;
   }
}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
   <div class="row">
      <div class="hidden-xs col-md-2" style="width:9.8%">
          <label for="nose">choose:</label>
      </div>
      <div class="col-xs-12 col-md-2"  >
          <select class="form-control" >
              <option  value="1">aaaaaaaaa</option>
          </select>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-2" >
          <select class="form-control">
              <option value="1">bbbbbbbbb</option>


          </select>

      </div>
      <div class="col-xs-12 col-md-2"  >
          <select class="form-control">
              <option value="1">cccccccccc</option>
          </select>

      </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在移动视图css中添加margin-bottom: 5px;以选择标记，或使用margin-bottom:5px创建另一个类并将其添加到下拉列表中。

select
{
  margin-bottom:5px;
}

或者

    .selectmargin
    {
      margin-bottom:5px;
    }

Answer 3

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
   <div class="row">
                            <div class="hidden-xs col-md-2" style="width:9.8%">
                                <label for="nose">choose:</label>
                            </div>
							</br></br></br>
                            <div class="col-xs-12 col-md-2"  style="padding-bottom: 1cm;">
                                <select class="form-control" >
                                    <option  value="1">aaaaaaaaa</option>
                                </select>
                            </div>
							
                            <div class="col-xs-12 col-sm-12 col-md-2" style="padding-bottom: 1cm;">
                                <select class="form-control">
                                    <option value="1">bbbbbbbbb</option>
                                   

                                </select>
                               
                            </div>
						
                            <div class="col-xs-12 col-md-2"  style="padding-bottom: 1cm;">
                                <select class="form-control">
                                    <option value="1">cccccccccc</option>
                                </select>
                               
                            </div>
                             
                      </div>
					  </br>

这是你的回答......