在部分視圖中放置兩個彼此相鄰的列

我正在處理包含兩列中的表單的MVC中的部分。但是，其中一種形式位於另一種下面。這是我的代碼。在部分視圖中放置兩個彼此相鄰的列

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

而我的兩列的CSS。

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

我是比較新的這一點，這是我的第一個項目，所以任何意見是值得歡迎的。

來源

2017-05-22 Andrew Ferguson

你想完成什麼？ – calexandre

對不起，我希望兩列在我的局部視圖內並排顯示。 –

#partialColunm2嵌套在#partialColumn1;）嘗試把的#partialColumn1#partialColumn2外：d

至少它爲我工作。

DEMO：https://codepen.io/Chesswithsean/pen/gWZGGL

來源

2017-05-22 20:42:21 Chesswithsean

我查看了Chrome開發者工具，並想知道爲什麼它顯示所有有趣的。我與我的divs馬虎！謝謝！ –

當然，沒問題:) – Chesswithsean

把你的cols分成6個，並刪除你的css，cols已經內聯。

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

來源

2017-05-22 20:34:57 calexandre

在部分視圖中放置兩個彼此相鄰的列

回答

相關問題