Я боролся с этой проблемой в течение последних двух дней.У меня есть веб-панель, которая отображает диаграммы или таблицы на карточках.Эти карты могут иметь разный размер в зависимости от того, какой график или таблица отображаются внутри.Они находятся внутри содержимого начальной страницы начальной загрузки.
Когда я использую определенный размер столбца, такой как col-md-3 или col-sm-4 или даже только col, evertyhing работает просто отлично.Однако при использовании 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>