在局部视图中将两列并排放置

Question

我正在 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;
}

我对这个比较陌生，这是我的第一个项目，所以欢迎任何建议。

Answer 1

把你的cols分成6个，去掉你的css，cols已经有inline了。

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

Answer 2

#partialColunm2 嵌套在 #partialColumn1 中；）尝试将 #partialColumn2 放在 #partialColumn1 之外：D

至少对我有用。

演示：https://codepen.io/Chesswithsean/pen/gWZGGL

在局部视图中将两列并排放置

Placing two columns beside each other in a partial view

html

css

model-view-controller

partial-views