html - 为什么列表项没有占满？

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 个名称，结果将显示在上图的顶部，占用非常小的宽度。你知道为什么吗？

但它工作正常，也就是说，如果有更多名称，它位于图像底部，例如:

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

Fiddle:但不知道为什么没有像图片中那样出现:https://jsfiddle.net/9L161awx/ .

Answer 1

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

<ul class="modal-list row">

行 类必须始终是列的父类。