2017-09-06 21 views
0

次のコードでは、コントロールを積み重ねて4行にしています。HTMLコントロールを同じ行に配置して積み重ねる方法

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

あなたはあなたのコントロールをラップのdivのために '' COL-SM- *を言及する必要があります。あなたは今それを見逃している –

答えて

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> 
関連する問題