jquery - 在 Bootstrap 的模态窗口中使用嵌套列

Question

我有一个模态窗口。在此窗口内，我有两列。一列包含复选框列表。另一列包含图片和一些文本。在右栏(带有图片和文字)中，我想使用嵌套栏(如 BS 文档 http://getbootstrap.com/css/#grid-nesting 中所示)将图片和文字放在一行中。现在，它们堆叠在一起。可能是模态窗口的宽度的原因？因为 html 代码就像在文档中一样。但是它不起作用。

我需要这样的东西:

可能需要使模态窗口更宽一点？

代码是:

 <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Sed at dignissim mauris?</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox"> Suspendisse in cursus leo, a
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox">Sed ligula elit, lacinia eget pretium
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox"> Phasellus fermentum fringilla orci
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox">  Mauris interdum, sem non
                                </label>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="col-lg-4">
                                    <img src="Images/testimage.png" />
                                </div>
                                <div class="col-lg-9">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                    Ut lobortis arcu sit amet commodo suscipit. Nulla fringilla velit erat,
                                    eget tristique elit ultrices eget. Sed cursus nunc in pretium scelerisque.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我修复了列问题，现在模态窗口宽度有问题

如何修复它？

Answer 1

我假设您使用的是 12 列网格，因此您的列加起来不应超过 12，即使在嵌套时也是如此。如果您看一下，您使用的是“col-lg-4”和“col-lg-9”，它们总共有 13 个。将其中一个减 1，它应该可以工作。