Bootstrap Grid 系统在模态对话框中不起作用答案

【问题标题】：Bootstrap Grid system doesn't work in modal dialogBootstrap Grid 系统在模态对话框中不起作用
【发布时间】：2017-10-06 20:09:51
【问题描述】：

在一个模态对话框中，我定义了一个类似 continue 的表单：

<div class="modal-body">
    <form class="form-horizontal">
        <div class="form-group">
            <div class="row">
                <label for="name" class="col-md-2 control-label">Name</label>
                <div class="col-md-9">
                    <input type="text" class="form-control" id="name"/>
                </div>
                <div class="col-md-1 text-left">
                    <span class="invalid-icon" title="Error!"></span>
                </div>
            </div>
        </div>
    </form>
</div>

最后一列中的图标位于模态对话框之外。见截图。有什么想法吗？

如果我只定义 11 列，并在第九列的输入文本旁边添加跨度，它就可以工作。如果我定义了 12 列，为什么不起作用？

【问题讨论】：

在 ng-modal 后面设置暗层
.form-group 和 .row 都给出 15px 负边距，请尝试删除 div.row。
@SandeepC.Nath 如果它是.form-horizontal 的孩子，它会这样做。 .form-horizontal .form-group { margin-right: -15px; margin-left: -15px; }
我要试试。我想我有一些风格可以避免得到预期的结果
@tmg 我为我的错误道歉

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

使用 col-md-2 尝试在 div 中使用标签

<div class="col-md-2">
<label for="name" class="control-label">Name</label>
</div>

还让错误 div 不可见而不是显示 none form-horizontal 也需要查看

【讨论】：