使用kendo和bootstrap的html对齐方式

时间:2015-04-06 06:12:53

标签: jquery html css twitter-bootstrap

我做了一段代码。

JSBIN

请参阅示例bin。对齐不合适。我不知道为什么第二行只持有一个项目。

2 个答案:

答案 0 :(得分:2)

<div class='col-md-12'>
<div class='col-md-6'>
    <div class='col-md-6 attachlbl'>Label 1: </div>
    <div class='col-md-6 attachctrl'>
        <input type='text' class='form-control' class='CustkendoTxt' data-id='137' maxlength='255' id='MaxRebatePerClaimant' style='width: 100%;' value='Rebate Tbox' disabled='disabled' /></div>
</div>
<div class='col-md-6'>
    <div class='col-md-6 attachlbl'>Label 2 Date: </div>
    <div class='col-md-6 attachctrl'>
        <input type='text' class='CustkendoDpi' data-id='138' id='PostmarkDate' style='width: 100%;' value='2015/04/07' disabled='disabled' /></div>
</div>
</div>
<div class='col-md-12'>
<div class='col-md-6'>
    <div class='col-md-6 attachlbl'>Label 3: </div>
    <div class='col-md-6 attachctrl'>
        <textarea type='text' class='form-control' class='CustkendoTxtA' data-id='139' maxlength='255' id='Eligible_Concepts' style='width: 100%; resize: vertical;' disabled='disabled'>Concepts TArea box</textarea></div>
</div>
<div class='col-md-6'>
    <div class='col-md-6 attachlbl'>Label 4?</div>
    <div class='col-md-6 attachctrl'>
        <select data-role='dropdownlist' class='CustkendoDdl' data-id='213' id='Volume_obtained_from_velocity_reports' style='width: 100%;' disabled='disabled'></select></div>
</div>
</div>
<div class='col-md-12'>
<div class='col-md-6'>
    <div class='col-md-6 attachlbl'>Label 5: </div>
    <div class='col-md-6 attachctrl'>
        <input type='text' class='form-control' class='CustkendoTxt' data-id='214' maxlength='255' id='RG_Coffee_Value' style='width: 100%;' value='R&G tBox' disabled='disabled' /></div>
</div>

<div class='col-md-6'>
    <div class='col-md-6 attachlbl'>Label 6?</div>
    <div class='col-md-6 attachctrl'>
        <select data-role='dropdownlist' class='CustkendoDdl' data-id='215' id='Does_account_require_CEMA_calls' style='width: 100%;' disabled='disabled'></select></div>
</div>
</div>
<div class='col-md-12'>
<div class='col-md-6'>
    <div class='col-md-6 attachlbl'>Label 7: </div>
    <div class='col-md-6 attachctrl'>
        <select class='CustkendoDdl' data-id='216' id='SodexoA' style='width: 100%;' disabled='disabled'>
            <option value='true' selected='true'>true</option>
            <option value='false'>false</option>
        </select></div>
</div>
<div class='col-md-6'>&nbsp;</div>

试用此代码......

JSbin Link

答案 1 :(得分:0)

您为所有列提供了行类。 给每行一个 像

        <div class="row">
                <div class="col-md-6">

                </div>
                <div class="col-md-6">

                </div>
<div>

<div class="row">
                <div class="col-md-6">

                </div>
                <div class="col-md-6">

                </div>
</div>