0

我创建了一个表格，并希望确保所有跨度都对齐并且是方形的。但即使所有跨度加起来为 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

4

1 回答 1

0

您只发布了一个片段，所以我不知道您如何将表单集成到页面的其余部分，但row-fluid可能会有所帮助：

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

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

更多提示：

  • 一些标签缺少类control-label。由于行高调整，这总体上很重要control-label。
  • 根据表格的完整宽度，某些标签可能无法span1放在一行中（在我的快速测试中就是这种情况）
  • 和一个一般的设计提示：最后一行有 3 个标签/输入对，有点破坏布局。通常，您会尝试坚持某些垂直定位。

希望这可以帮助

于 2013-02-01T20:22:52.267 回答