Html 为什么列表项没有占据整个列表？

我使用此模式来显示一些名称：

 <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>

名字
&时代；

@foreach（$name作为$name）


但是工作不正常，例如，如果只有3个名称，结果会显示在上面图像的顶部，但宽度很小。你知道为什么吗

但是它工作得很好，也就是说，如果有更多的名称，例如：

<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>



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

<ul class="modal-list row">



行
类必须始终是列的父级