Question

我有这个模态来显示一些名字：

 <div class="modal fade bd-example-modal-lg" id="modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Names</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                             <ul class="modal-list">
                               @foreach($names as $name)
                                 <li class="col-lg-4 col-md-6 col-sm-12">
                                     <a  class=""  id="{{$name}}">{{$name}}</a>
                                 </li>
                               @endforeach
                             </ul>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

我希望每行中有3个列表项占据模态的全部。因为它位于图像的底部：

enter image description here

但是工作不正常，如果只有3个名字，结果会出现在上面的图像顶部，occypying一个非常小的宽度。你知道为什么吗？

但是它工作得很好，也就是说，如果有更多的名字，它就在图像的底部：

<ul class="modal-list">
    <li class="col-lg-4 col-md-6 col-sm-12">
        <a class="">John</a>
    </li>
    <li class="col-lg-4 col-md-6 col-sm-12">
        <a class="">Peter</a>
    </li>
    <li class="col-lg-4 col-md-6 col-sm-12">
        <a class="">Paul</a>
    </li>
    <li class="col-lg-4 col-md-6 col-sm-12">
        <a class="">Ronald</a>
    </li>
    <li class="col-lg-4 col-md-6 col-sm-12">
        <a class="">Boris</a>
    </li>
    <li class="col-lg-4 col-md-6 col-sm-12">
        <a class="">Wayne</a>
    </li>
    <li class="col-lg-4 col-md-6 col-sm-12">
        <a class="">Ron</a>
    </li>
    <li class="col-lg-4 col-md-6 col-sm-12">
        <a class="">Jen</a>
    </li>
    <li class="col-lg-4 col-md-6 col-sm-12">
        <a class="">Arnold</a>
    </li>
    <li class="col-lg-4 col-md-6 col-sm-12">
        <a class="">Abe</a>
    </li>
    <li class="col-lg-4 col-md-6 col-sm-12">
        <a class="">Bryant</a>
    </li>
    <li class="col-lg-4 col-md-6 col-sm-12">
        <a class="">Carl</a>
    </li>
    <li class="col-lg-4 col-md-6 col-sm-12">
        <a class="">Clement</a>
    </li>
    <li class="col-lg-4 col-md-6 col-sm-12">
        <a class="">Buck</a>
    </li>

    <li class="col-lg-4 col-md-6 col-sm-12">
        <a class="">Cole</a>
    </li>
</ul>

小提琴：但不知道为什么不出现在图像中：https://jsfiddle.net/9L161awx/。

Answer 1

您必须将row类添加到ul元素：

<ul class="modal-list row">

row类必须始终是列的父级。

为什么列表项不占用全部？

1 个答案: