html - Bootstrap 行布局

Question

我正在尝试创建一个将出现在模态窗口中的表单，并且我的表单看起来正是我想要的。这是我的 HTML(只显示第一行，因为我相信正确的解决方案将适用于我的所有行)

<div class="container">
    <div class="row">
        <div class="col-sm-1">&nbsp;</div>
        <div class="col-sm-8">
            <form action="#" method="post">            
                <fieldset>
                    <legend style="width: 80%">Base Information</legend>
                    <div class='row'>
                        <div class='col-sm-5'>
                            <div class='form-group'>
                                <label for="user_firstname">First name</label>
                                <input class="form-control input-sm" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
                            </div>
                        </div>
                        <div class='col-sm-5'>
                            <div class='form-group'>
                                <label for="user_lastname">Last name</label>
                                <input class="form-control input-sm" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
                            </div>
                        </div>
                        <div class="col-sm-2">&nbsp;</div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>

我面临的问题是，我目前正在使用 Chrome 查看此内容，当我将浏览器窗口水平调整到小于 760 像素时，所有表单元素都堆叠在一起。

如您所见，我正试图去除右侧的大量间距。

有没有人对我如何消除右侧的填充有任何建议？

Answer 1

col-xs而不是 col-sm会帮助 breakpoint问题。您似乎在右侧也有空白区域，因为您指定了两列空白区域 <div class="col-sm-2">&nbsp;</div> . Bootstrap's grid system基于每行 12 列，因此跨越 div 的两列将占用空间。