如何將HTML控件放在同一行而不是堆疊起來

Question

我有下面的代碼，它將控件堆疊起來，從而製作出4行。

我試過除去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>

Answer 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>

Answer 2

這工作得很好：

 <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>