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已经内联。

     <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

至少它对我有用。

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

在局部视图中将两列彼此相邻放置

2 个答案: