2017-09-06 66 views
0

我有下面的代码,它将控件堆叠起来,从而制作出4行。如何将HTML控件放在同一行而不是堆叠起来

我试过除去div和应用行类,但它们不包含在单行中。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row"> 
 
             <div class ="col-sm-6" > 
 
              <div class="panel panel-primary"> 
 
               <div class="row"> 
 
                
 
                <div> 
 
                   Out of spec: 
 
                </div> 
 
                <div> 
 
                 <input type="text" class="form-control input-md"/> 
 
                </div> 
 
                <div> 
 
                 Is Blood dark: 
 
                 </div> 
 
                <div> 
 
                 <input type="text" class="form-control input-md"/> 
 
                </div> 
 

 
               </div> 
 
              </div> 
 
             </div> 
 
</div>

+2

你需要提及'COL-SM-*'对于包装你控制的div。你现在错过了 –

回答

1

你可以这样做:

<div class="row"> 
 
    <div class ="col-sm-6" > 
 
     <div class="panel panel-primary"> 
 
      <form class="form-inline"> 
 
       <div calss="form-group"> 
 
       <label>Out of spec:</label> 
 
       <input type="text" class="form-control input-md"/> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label>Is Blood dark:</label> 
 
       <input type="text" class="form-control input-md"/>             </div> 
 
      </form> 
 
     </div> 
 
    </div> 
 
</div>

或本

<div class="row"> 
 
    <div class ="col-sm-6" > 
 
     <div class="panel panel-primary"> 
 
      <form class="form-inline"> 
 
       
 
        <label>Out of spec:</label> 
 
        <input type="text" class="form-control input-md"/>    
 

 
       <label>Is Blood dark:</label> 
 
       <input type="text" class="form-control input-md"/>  
 
      </form> 
 
     </div> 
 
    </div> 
 
</div>

1

这工作得很好:

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
      <div class="row"> 
            <div class ="col-sm-6" > 
             <div class="panel panel-primary"> 
              <div class="row"> 

               <div class="col-sm-6"> 
                  <label>Out of spec:</label> 
                <input type="text" class="form-control input-md"/> 
               </div> 
               <div class="col-sm-6"> 
                <label>Is Blood dark:</label> 
                <input type="text" class="form-control input-md"/> 
               </div> 

              </div> 
             </div> 
            </div> 
      </div> 
相关问题