卡片未按预期填充行

【问题标题】：Cards don't fill row as expected卡片未按预期填充行
【发布时间】：2021-04-16 18:56:41
【问题描述】：

代码显示导航栏、侧面板和显示数据的主面板。 我有几行嵌套，在最后一个嵌套中，我想显示 3 张卡片，它们将填满整个剩余宽度，但到目前为止它们都粘在左边：

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <link href="css/sidebar.css" rel="stylesheet">

  <title>Sidebar + Main Panel</title>


</head>

<body>

  <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Sidebar + Main Panel</a>
    <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

    <ul class="navbar-nav px-3">
      <li class="nav-item text-nowrap">
        <a class="nav-link" href="#">Sign out</a>
      </li>
    </ul>
  </nav>

  <div class="container-fluid">
    <div class="row">
      <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
        <div class="sidebar-sticky pt-3">
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link active" href="#">
                                    SidebarItem1
                                </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                                     SidebarItem2
                                </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                                     SidebarItem3
                                </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                                    SidebarItem4
                                </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                                    SidebarItem5
                                </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                                    SidebarItem6
                                </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">     
                                    SidebarItem7
                                </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">     
                                   SidebarItem8
                                </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">                                       SidebarItem9
                                </a>
            </li>
          </ul>
      </nav>

      <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
        <div class="row" style="background:black;">
          <div class="card-deck mb-3 text-center">

            <div class="card mb-4 shadow-sm col-md-4">
              <div class="card-header">
                <h4 class="my-0 font-weight-normal">Free</h4>
              </div>
              <div class="card-body">
                <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
                <ul class="list-unstyled mt-3 mb-4">
                  <li>10 users included</li>
                  <li>2 GB of storage</li>
                  <li>Email support</li>
                  <li>Help center access</li>
                </ul>
                <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
              </div>
            </div>
            <div class="card mb-4 shadow-sm col-md-4">
              <div class="card-header">
                <h4 class="my-0 font-weight-normal">Pro</h4>
              </div>
              <div class="card-body">
                <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
                <ul class="list-unstyled mt-3 mb-4">
                  <li>20 users included</li>
                  <li>10 GB of storage</li>
                  <li>Priority email support</li>
                  <li>Help center access</li>
                </ul>
                <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
              </div>
            </div>
            <div class="card mb-4 shadow-sm col-md-4">
              <div class="card-header">
                <h4 class="my-0 font-weight-normal">Enterprise</h4>
              </div>
              <div class="card-body">
                <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
                <ul class="list-unstyled mt-3 mb-4">
                  <li>30 users included</li>
                  <li>15 GB of storage</li>
                  <li>Phone and email support</li>
                  <li>Help center access</li>
                </ul>
                <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
              </div>
            </div>

          </div>
        </div>
      </main>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>

</html>

我想要做的是能够在主面板空间的中心添加 3 行卡片，但正如你所看到的，它被推到左边 - 我做了一个黑色背景，所以你可以看到它更好。 它应该在没有响应的桌面模式下查看

【问题讨论】：

  • 如果想让三张卡片填满屏幕的整个宽度，请将w-100 类添加到.card-deck 分区中。 或如果您希望卡片居中对齐，您可以将m-auto 类添加到.card-deck 元素。
  • 一个提示（不能解决问题）：div class="sidebar-sticky pt-3 缺少结束标记

标签： css twitter-bootstrap bootstrap-4


【解决方案1】：

您需要在卡片组类上将左右边距更改为auto：

.card-deck {
    margin-left: auto;
    margin-right: auto;
}

【讨论】：

    【解决方案2】：

    我命令将行中的三张卡片居中（样式为background-color: black;，您需要添加div class="card-deck mx-auto mb-3"的水平边距

    引导程序中的水平边距auto -> mx-auto

    或使用原版 CSS

    .card-deck {
margin-left: auto;
margin-right: auto;
}

    附：如果.card-deck 在页面上是唯一的，那么它应该是 id="card-deck"

    【讨论】：

      【解决方案3】：

      你可以做的是在'card-deck'的父行中添加类'justify-content-center'或添加样式'margin：0 auto;'在“卡片组”类中。

      一切顺利！

      【讨论】：

        【解决方案4】：

        您的代码中存在很多问题，尤其是边栏。由于您没有为此请求帮助，因此我忽略了它，但首先要解决它，因为它正在扼杀您的设计。

        要使您的定价表居中对齐，您可以删除 main 中的行并只使用卡片组（参考：Pricing table simple）。 

        <!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <link href="css/sidebar.css" rel="stylesheet">

  <title>Sidebar + Main Panel</title>


</head>

<body>

  <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Sidebar + Main Panel</a>
    <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

    <ul class="navbar-nav px-3">
      <li class="nav-item text-nowrap">
        <a class="nav-link" href="#">Sign out</a>
      </li>
    </ul>
  </nav>

  <div class="container-fluid">
    <div class="row">
      <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
        <div class="sidebar-sticky pt-3">
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link active" href="#">
                                    SidebarItem1
                                </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                                     SidebarItem2
                                </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                                     SidebarItem3
                                </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                                    SidebarItem4
                                </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                                    SidebarItem5
                                </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                                    SidebarItem6
                                </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">     
                                    SidebarItem7
                                </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">     
                                   SidebarItem8
                                </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">                                       SidebarItem9
                                </a>
            </li>
          </ul>
      </nav>

      <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4" style="background-color: #000">
        
        <div class="card-deck mb-3 text-center">
        <div class="card mb-4 shadow-sm">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">Free</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
                <ul class="list-unstyled mt-3 mb-4">
                    <li>5 users included</li>
                    <li>2 GB of storage</li>
                    <li>Email support</li>
                    <li>Help center access</li>
                </ul>
                <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
            </div>
        </div>
        <div class="card mb-4 shadow-sm">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">Pro</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title pricing-card-title">$25 <small class="text-muted">/ mo</small></h1>
                <ul class="list-unstyled mt-3 mb-4">
                    <li>20 users included</li>
                    <li>10 GB of storage</li>
                    <li>Priority email support</li>
                    <li>Help center access</li>
                </ul>
                <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
            </div>
        </div>
        <div class="card mb-4 shadow-sm">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">Enterprise</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title pricing-card-title">$99 <small class="text-muted">/ mo</small></h1>
                <ul class="list-unstyled mt-3 mb-4">
                    <li>illimited users included</li>
                    <li>50 GB of storage</li>
                    <li>Phone and email support</li>
                    <li>Help center access</li>
                </ul>
                <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
            </div>
        </div>
    </div>
          
      </main>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

</body>

</html>

        【讨论】：

          【解决方案5】：

          如果要填充整个剩余宽度，则需要删除带有 card-deck 类的 div 并仅保留内部 col-md-4 ，否则如果要将卡片居中并保留背景，只需添加样式边距： 0 自动添加到您的 .card-deck 类。

          【讨论】：

            猜你喜欢
            • 1970-01-01
            • 2021-05-19
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2023-03-17
            • 2017-08-20
            • 2023-03-12
            • 1970-01-01
            相关资源
            最近更新 更多
            热门标签
            Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode