twitter-bootstrap - 引导表单布局“正确”的方式？

Question

这是我的表格：

<div class="row">

<form class="well form-inline span6 offset3">

    <select name="data[Number][country]" id="NumberCountry">
        <option>Choose a country code:</option>
        <option value="+44">+44</option>
        <option value="+81">+81</option>
        <option value="+1">+1</option>
        <option value="+70">+70</option>
    </select>   
    <input type="text" class="input-small span2" placeholder="eg. 7764">
    <input type="password" class="input-small span2" placeholder="eg. 123456">
    <button class="btn btn-large btn-primary">Activate Your SIM</button>

</form>


</div>

这是一个工作示例：

http://jsfiddle.net/pickledegg/aJfMx/6/

我已经使用 Bootstrap 进行了调整，但我试图了解如何使用行和跨度来“微调”布局。

我希望按钮集中并在其上方留出一些空间。正如你所看到的，我在那里捏造了一​​些行和跨类，但是有人可以告诉我这样做的“最佳实践”方式吗？它将帮助我更清楚地了解如何正确使用这个框架。

Answer 1

^{刚看到你的回复，这是我对你的模型的看法。}

为了正确布局您的设计，我们首先需要将这些部分分成两行，一个输入行和一个按钮行，为此我们可以依靠.control-group引导程序设置的类来包含每个部分。因此，有了.control-group类，您的标记将如下所示：

<div class="container">

 <div class="row">
     <form class="well form-inline span8 offset2 custom-form">    
        <div class="control-group">
            <div class="controls">
                <select class="span4" name="data[Number][country]" id="NumberCountry">
                    <option>Choose a country code:</option>
                    <option value="+44">+44</option>
                    <option value="+81">+81</option>
                    <option value="+1">+1</option>
                    <option value="+70">+70</option>
               </select>
               <input type="text" class="input-small span2" placeholder="eg. 7764">
               <input type="password" class="input-small span2" placeholder="eg. 123456">
            </div>
        </div>
        <div class="control-group">
            <div class="controls center">
                <button class="btn btn-large btn-primary">Activate Your SIM</button>
            </div>
        </div>
    </form>
</div>

</div> <!-- /container -->

这样，您将通过引导程序在输入和按钮行上设置一些边距，并且它们不会粘在一起。我注意到您还在设计中包含了响应式样式表，并且您的设置在调整窗口大小时会中断，在文档中的引导演示中也注意到了同样的情况，因此我们必须解决这个问题。为此，我创建了自己的.custom-form类，以便在调整屏幕大小时正确分隔输入和按钮行，这样您的更改不会影响您网站上可能拥有的其他引导元素。创建了另一个名为.center将您的按钮置于表单中心的类。

.custom-form input[class*="span"] {
    width: 146px;
}

.center {
    text-align:center;
}

@media (max-width: 767px) {
    .custom-form input[class*="span"], select[class*="span"] {
        margin-bottom:10px;
        width:100%;       
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .custom-form.span8 {
        width:548px;
    }
} 

演示：http: //jsfiddle.net/aJfMx/8/

Answer 2

我将根据较新版本的引导程序和模态的使用对此略有不同，但它适用于使用其他容器而不是模态。我没有从上述解决方案中拿走任何东西，因为它非常可靠；但是，我发布此内容的原因是因为较新的版本将确保跨浏览器支持和窗口大小调整。

您需要做的第一件事是调用 form-horizo​​ntal 类，然后为每个表单元素创建 form-group(s)。听起来比它更复杂：

<form class="form-horizontal" name="formName" action="" method="POST">

和

<!-- Name input-->
<div class="form-group">
    <label class="col-md-4 control-label" for="tokenName">Name</label>
        <div class="col-md-6">
            <input id="name" name="name" type="text" placeholder="Name" class="form-control">
        </div>
</div>

看……一点也不差。

一旦你有了它，为表单组设置你的 col 长度，你应该处于相当好的状态。当您调整窗口大小时，这将强制调整大小。最好的部分是，除非您想自己定制表单外观，否则不需要修改 css。Bootstrap 为您处理它。如果您想进一步阅读但出于本文的目的，这里有一个非常好的教程（http://tutsme-webdesign.info/bootstrap-3-contact-modal/ ）；这是我根据教程快速整理的内容。

<a href="#" data-toggle="modal" data-target="#modalName">Some Link Here</a>
<div class="modal fade" id="modalName" tabindex="-1" role="dialog" aria-labelledby="modalName" aria-hidden="true">
    <div class="modal-dialog>
        <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Some Header Here</h4>
    </div>
    <div class="modal-body">
        <div class="container center-block">
            <form class="form-horizontal" name="formName" action="" method="POST">
                <fieldset>

                    <!-- Name input-->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="tokenName">Name</label>
                        <div class="col-md-6">
                            <input id="name" name="name" type="text" placeholder="Name" class="form-control">
                        </div>
                    </div>

                    <!-- URL input-->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="url">URL</label>
                        <div class="col-md-6">
                            <input id="url" name="url" type="text" placeholder="http://somedomain.com" class="form-control">
                        </div>
                    </div>

                    <!-- Entity Association -->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="associationId">Association</label>
                        <div class="col-md-6">
                            <select class="form-control" id="associationId" name="associationId">
                                <option>Choose an Association</option>
                                <option value="1">Programming</option>
                            </select>
                        </div>
                    </div>

                    <!-- Message body -->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="description">Description</label>
                        <div class="col-md-6">
                            <textarea class="form-control" id="description" name="description" placeholder="Please enter your description here..." rows="5"></textarea>
                        </div>
                    </div>

                    <!-- Form actions -->
                    <div class="form-group">
                        <div class="col-md-10 text-right">
                            <button type="submit" value="Submit" class="btn btn-primary btn-lg">Save</button>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>
</div>
</div>