Question

过去两天我一直在努力解决这个问题。我有一个网络仪表板，可以在卡片上显示图表或表格。这些卡的大小可能不同，具体取决于其中显示的图表或表格。它们位于引导导航标签内容中。

当我使用定义的col大小时，例如col-md-3或col-sm-4或什至只有col，一切都可以。但是，使用col-auto时，它会在屏幕，行甚至容器的上方水平“溢出”。

以下是我从我的角度应用程序中删除的演示代码

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title>Bootstrap grid problem</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>

  <div class="container-fluid">

    <div class="row justify-content-center">

      <div class="col-lg-11 col-md-11">

        <ul class="nav nav-tabs border-0" id="tabMenu" role="tablist">
          <li class="nav-item mr-1" *ngFor="let route of routeLinks; let i = index;">
            <a class="nav-link" data-toggle="tab" (click)="activeLinkIndex = i" [ngClass]="{ 'active': activeLinkIndex === i, 'text-light': activeLinkIndex !== i, 'bg-azul-escuro': activeLinkIndex !== i,
                    'bg-cinza-claro': activeLinkIndex === i, 'text-azul-escuro': activeLinkIndex === i, 
                    'font-weight-bold': activeLinkIndex === i }" [routerLink]="route.link">{{route.title}}</a>
          </li>
        </ul>

        <div class="tab-content" id="tabMainContent">
          <div class="tab-pane fade show active" id="central" role="tabpanel" aria-labelledby="central-tab">
            <div class="row">
              <div class="col-lg-12 col-md-12">
                <nav aria-label="breadcrumb">
                  <ol class="breadcrumb m-0 bg-light rounded-0 ">
                    <fa-icon [icon]="faHome" class="mr-2 text-dark"></fa-icon>
                    <li class="breadcrumb-item"><a href="#">Main</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Consolidated</li>
                  </ol>
                </nav>
              </div>
            </div>

            <div class="row bg-light py-3 rounded-top text-white">
              <div class="col-auto bg-dark">
                <div class="mx-3">
                  <p>
                    Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns
                    will resize no matter the width of the center column.
                  </p>

                </div>
              </div>
              <div class="col bg-dark">
                <div class="mx-3">
                  <p>
                    Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns
                    will resize no matter the width of the center column.
                  </p>

                </div>
              </div>
              <div class="col bg-dark">
                <div class="mx-3">
                  <p>
                    Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns
                    will resize no matter the width of the center column.
                  </p>

                </div>
              </div>
            </div>

          </div>
        </div>

      </div>


    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

Bootstrap col-auto扩展到行大小以上

0 个答案: