2つの列を部分的に並べて配置する

Question

私はMVCの部分的な作業を行っています。しかし、フォームの1つは、他のフォームの下に座っています。ここに私のコードです。

<div class="row"> 

     <div id="partialColumn1" class= "col-md-12"> 

      <div class="field padding-left-40"> 
       <label>First Name:</label> 
       <input id="add_Client_firstName-1" name="add_Client_firstName-1" type="text" value="[First Name goes here ]"> 
      </div> 

      <div class="field padding-left-40"> 
       <label>Last Name:</label> 
       <input id="add_Client_lastName-1" name="add_Client_LastName-1" type="text" value="[Last Name goes here ]"> 
      </div> 


     <div id="partialColumn2" class="col-md-12"> 
      <div class="field padding-left-40"> 
       <label>Referral Date:</label> 
       <input id="add_Client_referralDate-1" name="add_Client_referralDate-1" type="Date" /> 
      </div> 


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

そして、私の2つの列のCSS。

#partialColumn1{ 
    float: left; 
    display: inline-block; 
} 
#partialColumn2{  
    display: inline-block; 
    float: right; 
} 

これは比較的新しいものです。私の最初のプロジェクトです。アドバイスは大歓迎です。

Answer 1

#partialColunm2#partialColumn1にネストされている;）#partialColumn1の外#partialColumn2を入れてみてください：D

は、少なくともそれが私のために働きました。

デモ：https://codepen.io/Chesswithsean/pen/gWZGGL

Answer 2

あなたのコラムをそれぞれ6個ずつ入れて、あなたのcssを取り除くと、colはすでにインラインになっています。

 <div class='row'> 
     <div id="partialColumn1" class= "col-md-6"> 

      <div class="field padding-left-40"> 
       <label>First Name:</label> 
       <input id="add_Client_firstName-1" name="add_Client_firstName-1" type="text" value="[First Name goes here ]"> 
      </div> 

      <div class="field padding-left-40"> 
       <label>Last Name:</label> 
       <input id="add_Client_lastName-1" name="add_Client_LastName-1" type="text" value="[Last Name goes here ]"> 
      </div> 
     </div> 

     <div id="partialColumn2" class="col-md-6"> 
      <div class="field padding-left-40"> 
       <label>Referral Date:</label> 
       <input id="add_Client_referralDate-1" name="add_Client_referralDate-1" type="Date" /> 
      </div> 
     </div>   
    </div>