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/

Answer 2

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

您需要做的第一件事是调用form-horizontal类，然后为每个表单元素创建form-group。听起来比以前更复杂：

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

Bootstrap表单布局'正确'的方式？

2 个答案: