Bootstrap 3 右拉不工作答案

【问题标题】：Bootstrap 3 pull-right not workingBootstrap 3 右拉不工作
【发布时间】：2014-02-13 19:49:34
【问题描述】：

我正在使用 Bootstrap 3 创建一个多列表单。

这是第一列。

<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <form class="form-inline" role="form">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                             <label for="RecordID" class="col-md-4 nopadding">Record ID</label><div class="col-md-8 nopadding pull-right"><input class="form-control" id="RecordID" type="text"></div>
                        </div>
                        <div class="form-group">
                             <label for="ID" class="col-md-5 nopadding">ID</label><div class="col-md-7 nopadding pull-right"><input class="form-control" id="ID" type="text"></div>
                        </div>
                        <div class="form-group nopadding">
                             <label for="FamilyName" class="col-md-5 nopadding">Family Name</label><div class="col-md-7 nopadding"><input class="form-control" id="FamilyName" type="text" maxlength="30"></div>
                        </div>
                        <div class="form-group">
                             <label for="GivenName" class="col-md-5 nopadding">Given Name</label><div class="col-md-7 nopadding"><input class="form-control" id="GivenName" type="text" maxlength="30"></div>
                        </div>
                        <div class="form-group">
                             <label for="MiddleName" class="col-md-5 nopadding">Middle Name</label><div class="col-md-7 nopadding"><input class="form-control" id="MiddleName" type="text" maxlength="30"></div>
                        </div>
                    </div>
                    //other column
                </div>
            </form>
        </div>
    </div>
</div>

但是，我得到的第一列看起来像这样。

我想将文本字段向右对齐，所以我在封装了 ID 文本字段的 div 中添加了“pull-right”类。但是，它不起作用。

这里是 JSFiddle 链接，你会在链接中找到 nopadding 类，它只是删除了填充。 JSFiddle的结果框默认不够大，需要拉结果框才能得到我得到的结果。：JSFiddle link

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

将 class="form-group col-md-12 nopadding" 添加到当前为 <div class="form-group"> 的 div 中

【讨论】：

太棒了，它有效。顺便说一句，我需要删除右拉才能使表单在小屏幕上正确呈现。

【解决方案2】：

我会建议这样的事情：

<div class="container nopadding">
<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="recordId" class="col-sm-2 control-label">Record Id</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" id="recordId" placeholder="Record Id">
        </div>
    </div>
    <div class="form-group">
        <label for="id" class="col-sm-2 control-label">Id</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" id="id" placeholder="Password">
        </div>
    </div>
    <div class="form-group">
        <label for="familyName" class="col-sm-2 control-label">Family Name</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" id="familyName" placeholder="Family Name" maxlength="30">
        </div>
    </div>
    <div class="form-group">
        <label for="givenName" class="col-sm-2 control-label">Given Name</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" id="givenName" placeholder="Given Name" maxlength="30">
        </div>
    </div>
    <div class="form-group">
        <label for="middleName" class="col-sm-2 control-label">Middle Name</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" id="middleName" placeholder="Middle Name" maxlength="30">
        </div>
    </div>
</form>

http://jsfiddle.net/y838v/3/

基于http://getbootstrap.com/css/#forms-horizontal

【讨论】：

我之前尝试过form-horizontal，但我发现填充太大，因为我需要制作包含许多列的长表单。还是谢谢。