Bootstrap mobile inline form

Question

我正在使用bootstrap。我想在手机elm1，elm2和elm3中显示一个旁边的内容（如内联）。看看下面的代码：

<div class="container-fluid"> 

<div class="form-group"> 
        <label class="control-label col-sm-5 elm0" for="email">Date:</label> 
        <div class="col-sm-2 elm1"> 
        <select class="form-control"> 
         <option>1</option> 
         .... 
         <option>12</option> 
        </select> 
        </div> 
        <div class="col-sm-1 elm2">/</div> 
        <div class="col-sm-4 elm3"> 
        <select class="form-control"> 
         <option>2015</option> 
         .... 
         <option>2035</option> 
        </select> 
        </div> 
       </div> 
</div> 

然而在移动解决方案的三个元素一个接一个。如果我把col-xs- ..而不是col-sm- .. elm0显示不好。

我能做些什么？

Answer 1

您可以删除自举类和只是添加下面的规则，以你的CSS

.elm0,.elm1,.elm2,.elm3{ 
    display:inline-block; 
} 

代码片段

.elm0, 
 
.elm1, 
 
.elm2, 
 
.elm3 { 
 
    display: inline-block; 
 
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script> 
 
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 

 
    <div class="form-group"> 
 
    <label class="control-label elm0" for="email">Date:</label> 
 
    <div class="elm1"> 
 
     <select class="form-control"> 
 
     <option>1</option> 
 
     .... 
 
     <option>12</option> 
 
     </select> 
 
    </div> 
 
    <div class="elm2">/</div> 
 
    <div class="elm3"> 
 
     <select class="form-control"> 
 
     <option>2015</option> 
 
     .... 
 
     <option>2035</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

但最好使用自举类和属性。 这里是示例http://getbootstrap.com/css/#forms 在form上加上这个类http://prntscr.com/6okd0g