Question

尝试熟悉Bootstrap及其网格系统。下面显示了我创建页脚的尝试，我不想使用所有12个cols，目前它看起来很好 - 但由于某种原因我无法将列表项置于div中。我曾尝试使用Google开发工具，但无法找到原因。

.wrapper{
    width:80%;
    margin:0 auto;
}
.footer{
    margin:0 auto;
    text-align:center;
}

HTML

  <div class="row footer">
            <div class="wrapper clearfix">
                <div class="col-md-2 ">
                    <ul>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                    </ul>
                </div>
                <div class="col-md-2">
                    <ul>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                    </ul>
                </div>
                <div class="col-md-2">
                    <ul>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                    </ul>
                </div>
                <div class="col-md-2">
                    <ul>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                    </ul>
                </div>
            </div>
        </div>

Answer 1

使用

.footer ul {
  display: grid;
  justify-content: center;
}

demo

使用bootstrap将div中的文本居中

1 个答案: