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 -->

这样,输入和按钮行上的引导程序将设置一些边距,它们不会粘在一起.我注意到你还在你的设计中包含了响应式样式表,并且在窗口调整大小时你的设置类型中断了,在文档中的bootstrap演示中也注意到了这一点,所以我们必须解决这个问题.为了实现这一目标,我创建了自己的.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/