Question

我创建了一个表单，并希望确保所有跨度排列并且是正方形的。但即使所有跨度都加起来为12，每行的宽度也不同。就是这样，或者我做错了什么？

<div class="container ">

                            <form class="well form-inline">
                                <div class="controls controls-row">  
                                    <label class="span1" for="input01">
                                        Prefix
                                    </label>
                                    <input type="text" class="span1" id="input01" placeholder="Dr."><label class="span1" for="input02">
                                        First Name
                                    </label>
                                    <input type="text" class="span3" id="input02" placeholder="John">
                                    <label class="control-label span1" for="input03">
                                        last Name
                                    </label>
                                    <input type="text" class="span3" id="input03" placeholder="Doe">
                                    <label class="control-label span1" for="input04">
                                        Suff
                                    </label>
                                    <input type="text" class="span1" id="input04" placeholder="Jr.">
                                </div>
                                <div class="controls controls-row">  
                                    <label class="span1" for="input01">
                                        Company
                                    </label>
                                    <input type="text" class="span5" id="input01" placeholder="Sample LLC">
                                    <label class="span1" for="input02">
                                        Title
                                    </label>
                                    <input type="text" class="span5" id="input02" placeholder="Director of Samples">
                                </div>
                                <div class="controls controls-row">  
                                    <label class="span1" for="input01">
                                        Address 1
                                    </label>
                                    <input type="text" class="span5" id="input01" placeholder="Address Line 1">
                                    <label class="span1" for="input02">
                                        Address 2
                                    </label>
                                    <input type="text" class="span5" id="input02" placeholder="Address Line 2">
                                </div>
                                <div class="controls controls-row">  
                                    <label class="span1" for="input01">
                                        Cntry
                                    </label>
                                    <select class="input-medium span2 countries" data-country="US"></select>
                                    <label class="span1" for="input01">
                                        City
                                    </label>
                                    <input type="text" class="span2" id="input02" placeholder="City">
                                    <label class="span1" for="input02">
                                        St/Prv
                                    </label>
                                    <select class="input-medium span2 states" data-country="US" data-state="CA"></select>
                                    <label class="span1" for="input01">
                                        Zip
                                    </label>
                                    <input type="text" class="span2" id="input02" placeholder="City">
                                </div>
                                <div class="controls controls-row">  
                                    <label class="span1" for="input01">
                                        Email
                                    </label>
                                    <input type="text" class="span5" id="input01" placeholder="you@yourdomain.com">
                                    <label class="span2" for="input02">
                                        Confirm Email
                                    </label>
                                    <input type="text" class="span4" id="input02" placeholder="you@yourdomain.com">
                                </div>
                                <div class="controls controls-row">  
                                    <label class="span1" for="input01">
                                        Phone
                                    </label>
                                    <input type="text" class="span3" id="input01" placeholder="">
                                    <label class="span1" for="input02">
                                        Cell
                                    </label>
                                    <input type="text" class="span3" id="input02" placeholder="">
                                    <label class="span1" for="input02">
                                        Fax
                                    </label>
                                    <input type="text" class="span3" id="input02" placeholder="">
                                </div>
                            </form>
                        </div>

屏幕截图：http://www.flickr.com/photos/92503149@N07/8409032538/in/photostream

Answer 1

您只发布了一个代码段，因此我不知道您是如何将该表单整合到页面的其余部分中的，但row-fluid可以提供帮助：

<form class="well form-inline row-fluid">

我试了一下，看起来已经好多了。

更多提示：

某些标签缺少班级control-label。由于control-label所做的行高调整，这一点非常重要。
取决于表单的完整宽度，某些标签可能不适合span1一行（我的快速测试就是这种情况）
和一般设计提示：带有3个标签/输入对的最后一行打破了布局。通常，您会尝试坚持某些垂直定位。

希望这有帮助

Bootstrap表格不均匀

1 个答案: