如何使用css改变列表显示的列数？

Question

我是 css 和 bootsrap 的新手，我正在尝试使用此示例中的代码：

https://www.bootdey.com/snippets/view/bs4-new-friends-panel

HTML:

<div class="container">
    <div class="row">
        <div class="col-md-12 col-lg-6">
            <div class="card">
                <div class="header">
                    <h2><strong>New</strong> Friends <small>Add new friend in last month</small></h2>
                </div>
                <div class="body">
                    <ul class="new_friend_list list-unstyled row">
                        <li class="col-lg-4 col-md-2 col-sm-6 col-4">
                            <a href="">
                                <img src="https://bootdey.com/img/Content/avatar/avatar7.png" class="img-thumbnail" alt="User Image">
                                <h6 class="users_name">Jackson</h6>
                                <small class="join_date">Today</small>
                            </a>
                        </li>
                        <li class="col-lg-4 col-md-2 col-sm-6 col-4">
                            <a href="">
                                <img src="https://bootdey.com/img/Content/avatar/avatar6.png" class="img-thumbnail" alt="User Image">
                                <h6 class="users_name">Aubrey</h6>
                                <small class="join_date">Yesterday</small>
                            </a>
                        </li>
                        <li class="col-lg-4 col-md-2 col-sm-6 col-4">
                            <a href="">
                                <img src="https://bootdey.com/img/Content/avatar/avatar5.png" class="img-thumbnail" alt="User Image">
                                <h6 class="users_name">Oliver</h6>
                                <small class="join_date">08 Nov</small>
                            </a>
                        </li>
                        <li class="col-lg-4 col-md-2 col-sm-6 col-4">
                            <a href="">
                                <img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="img-thumbnail" alt="User Image">
                                <h6 class="users_name">Isabella</h6>
                                <small class="join_date">12 Dec</small>
                            </a>
                        </li>
                        <li class="col-lg-4 col-md-2 col-sm-6 col-4">
                            <a href="">
                                <img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="img-thumbnail" alt="User Image">
                                <h6 class="users_name">Jacob</h6>
                                <small class="join_date">12 Dec</small>
                            </a>
                        </li>
                        <li class="col-lg-4 col-md-2 col-sm-6 col-4">
                            <a href="">
                                <img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-thumbnail" alt="User Image">
                                <h6 class="users_name">Matthew</h6>
                                <small class="join_date">17 Dec</small>
                            </a>
                        </li>                            
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-6">
            <div class="card">
                <div class="header">
                    <h2><strong>New</strong> Friends <small>Add new friend in last month</small></h2>
                </div>
                <div class="body">
                    <ul class="new_friend_list list-unstyled row">
                        <li class="col-lg-4 col-md-2 col-sm-6 col-4">
                            <a href="">
                                <img src="https://bootdey.com/img/Content/avatar/avatar7.png" class="img-thumbnail" alt="User Image">
                                <h6 class="users_name">Jackson</h6>
                                <small class="join_date">Today</small>
                            </a>
                        </li>
                        <li class="col-lg-4 col-md-2 col-sm-6 col-4">
                            <a href="">
                                <img src="https://bootdey.com/img/Content/avatar/avatar5.png" class="img-thumbnail" alt="User Image">
                                <h6 class="users_name">Aubrey</h6>
                                <small class="join_date">Yesterday</small>
                            </a>
                        </li>
                        <li class="col-lg-4 col-md-2 col-sm-6 col-4">
                            <a href="">
                                <img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-thumbnail" alt="User Image">
                                <h6 class="users_name">Oliver</h6>
                                <small class="join_date">08 Nov</small>
                            </a>
                        </li>
                        <li class="col-lg-4 col-md-2 col-sm-6 col-4">
                            <a href="">
                                <img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="img-thumbnail" alt="User Image">
                                <h6 class="users_name">Isabella</h6>
                                <small class="join_date">12 Dec</small>
                            </a>
                        </li>
                        <li class="col-lg-4 col-md-2 col-sm-6 col-4">
                            <a href="">
                                <img src="https://bootdey.com/img/Content/avatar/avatar6.png" class="img-thumbnail" alt="User Image">
                                <h6 class="users_name">Jacob</h6>
                                <small class="join_date">12 Dec</small>
                            </a>
                        </li>
                        <li class="col-lg-4 col-md-2 col-sm-6 col-4">
                            <a href="">
                                <img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="img-thumbnail" alt="User Image">
                                <h6 class="users_name">Matthew</h6>
                                <small class="join_date">17 Dec</small>
                            </a>
                        </li>                            
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

body{
    margin-top:20px;
    background-color: #f4f6f9;
}
.card {
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    background: #fff;
    border-radius: .1875rem;
    margin-bottom: 30px;
    border: 0;
    display: inline-block;
    position: relative;
    width: 100%;
    box-shadow: none;
}
.card .header {
    color: #424242;
    padding: 20px;
    position: relative;
    box-shadow: none;
}
.card .header h2 {
    color: #757575;
    position: relative;
}
.card .header h2:before {
    background: #6572b8;
}
.card .header h2 {
    font-size: 15px;
}
.card .header h2::before {
    position: absolute;
    width: 2px;
    height: 18px;
    left: -20px;
    top: 0;
    content: '';
}
.theme-purple .card .header h2 strong {
    color: #6572b8;
}
.card .header h2 small {
    color: #9e9e9e;
    line-height: 15px;
}
.card .body {
    color: #424242;
    font-weight: 400;
    padding: 20px;
}
.new_friend_list {
    margin-bottom: 0px;
}

.new_friend_list li .users_name {
    color: #424242;
    text-transform: capitalize;
}
.new_friend_list li .users_name {
    margin-top: 5px;
}
.new_friend_list li .users_name{
 margin-bottom: 0px;
}
.new_friend_list li .join_date {
    color: #757575;
}

a {
    outline: none !important;
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
}

我需要更新它，使每行有 5 个数据元素，而不是现在的 3 个。如果有人可以帮助解释如何做到这一点，我们将不胜感激！

我试过列数，但似乎不起作用。

谢谢。

Answer 1

这是我的第一个回答（激动）

首先检查 html 并找到下面的代码行。在每个 <li> 元素上将 col-lg-4 更改为 col-lg-2。

修改仅适用于大屏

实际：

<li class="col-lg-4 col-md-2 col-sm-6 col-4"> <a href=""> <img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-thumbnail" alt="User Image"><h6 class="users_name">Matthew</h6> <small class="join_date">17 Dec</small> </a></li>

修改：

<li class="col-lg-2 col-md-2 col-sm-6 col-4"> <a href=""> <img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-thumbnail" alt="User Image"><h6 class="users_name">Matthew</h6> <small class="join_date">17 Dec</small> </a></li>

要了解更多信息，请查看此页面 https://getbootstrap.com/docs/5.1/layout/grid/

楚斯

Answer 2

您应该删除 class col-lg-4 并将其替换为 class .w-20

比 css 添加 class .w-20 像这样：

.w-20 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 20%;
          flex: 0 0 20%;
  max-width: 20%;
}

您可以在此处找到对同一问题的更详细的原始答案：

如何使用css改变列表显示的列数？

How to use css to change the number of columns in a list display?

html

css

bootstrap-4