Question

我使用的是非最近集成了boostrap样式（CSS文件）的非引导应用程序。但我在网格布局中面临一个奇怪的问题。这是问题的屏幕截图。

此处第一个标签列是 col-md-2 ，然后是下拉列 col-md-5 ，最后一列（带按钮组）仅 COL-MD-4 即可。但最后一栏突破了新的界限。

这是标记

<div class="panel panel-default">
                            <div class=" panel-heading">
                                <i class="fa fa-apple"></i>
                                Manage Questionnaire</div>
                            <div class="panel-body">

                                        <div class="form-horizontal">
                                            <div class="form-group">
                                                <label class=" col-md-2 control-label">
                                                    Account</label>
                                                <div class="col-md-5">
                                                    <select class="form-control">
                                                        <option value="value">text</option>
                                                    </select></div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-md-2 control-label">
                                                    Survey</label>
                                                <div class="col-md-5">
                                                    <select class="form-control ">
                                                        <option value="value">text</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="btn-group">
                                                        <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton3','')" class="btn btn-default" id="LinkButton3"> <i class="fa fa-file-o"></i></a>
                                                        <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton4','')" class="btn btn-default" id="LinkButton4"> <i class="fa fa-pencil"></i></a>
                                                        <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton5','')" class="btn btn-danger" id="LinkButton5"> <i class="fa fa-remove"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-md-2 control-label">
                                                    Section</label>
                                                <div class="col-md-5">
                                                    <select class="form-control">
                                                        <option value="value">text</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="btn-group">
                                                        <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton1','')" class="btn btn-default" id="LinkButton1"> <i class="fa fa-file-o"></i></a>
                                                        <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton2','')" class="btn btn-default" id="LinkButton2"> <i class="fa fa-pencil"></i></a>
                                                        <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton6','')" class="btn btn-danger" id="LinkButton6"> <i class="fa fa-remove"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                            </div>
                        </div>

我不知道为什么它不适合在一行中，因为如果我们添加这些行的列长度，它只有11个

Answer 1

尝试将它们放在一个带有新行和完整12列的单独div中 - 我只使用了一段代码，这应该可行;

<div class=row>
    <div class="col-lg-12">
        <div class="form-group">
            <label class="col-md-2 control-label">
                Section</label>
            <div class="col-md-5">
                <select class="form-control">
                    <option value="value">text</option>
                </select>
            </div>
            <div class="col-md-4">
                <div class="btn-group">
                    <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton1','')" class="btn btn-default" id="LinkButton1"> <i class="fa fa-file-o"></i></a>
                    <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton2','')" class="btn btn-default" id="LinkButton2"> <i class="fa fa-pencil"></i></a>
                    <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton6','')" class="btn btn-danger" id="LinkButton6"> <i class="fa fa-remove"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>

Bootstrap 12列布局中断甚至还有两个列空间重新生成

1 个答案: