对齐Twitter Bootstrap表单组

时间:2015-10-10 16:53:37

标签: html css twitter-bootstrap

我正在尝试一些关于Twitter Bootstrap的简单示例,有些我不能做的是因为一列有两行(如果它是一个表),并且我能做的最好的是下面这段代码不对齐< / p>

    <div class="container">
    <div class="col-md-6">
        <div class="form-group">
            <label for="usuario" class="control-label">Nome</label>
            <input type="usuario" class="form-control" name="usuario" id="usuario" placeholder="Usuario"/>
            <label for="sobrenome" class="control-label">SobreNome</label>
            <input type="sobrenome" class="form-control" name="sobrenome" id="sobrenome" placeholder="sobrenome"/>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label for="usuario" class="control-label">Orgao</label>
            <input type="orgao" class="form-control" name="orgao" id="orgao" placeholder="Orgao"/>
        </div>
    </div>

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

    <div class="col-md-6">
        <div class="form-group">
            <label for="usuario" class="control-label">Orgao</label>
            <input type="orgao" class="form-control" name="orgao" id="orgao" placeholder="Orgao"/>
        </div>
    </div>
</div>

如何将最后一个表单组放在另一个表单组的相同方向,但是大小为6?

1 个答案:

答案 0 :(得分:0)

您可以设置课程.row以消除左右边距

<强> HTML

<div class="col-md-12">
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="usuario" class="control-label">Orgao</label>
                    <input type="orgao" class="form-control" name="orgao" id="orgao" placeholder="Orgao" />
                </div>
            </div>
        </div>
    </div>

<强> DEMO HERE