#html #css #bootstrap-4
#HTML #css #bootstrap-4
Вопрос:
У меня есть сетка с 3 столбцами и по строке, в каждом из этих столбцов есть контейнер. Но у меня странный дисплей : 
Нормальное отображение должно быть таким :
Мои 3 столбца: моя панель навигации, сетка моей карты и мой «масштаб» на одной карте. Я хочу, чтобы моя панель навигации И столбец «масштабирование» были с фиксированным верхом, поэтому, когда я прокручиваю вниз, прокручивается только моя сетка. Итак, я установил атрибут fixed-top для своей навигационной панели, и это работает. Но когда я делаю то же самое для своего столбца масштабирования, я получаю странный макет.
Мое тело html :
<body data-spy="scroll" data-target=".navbar .fixed-top" data-offset="50">
<div class="container-fill main_container">
<div class="row no-gutters">
<div class="col-sm-2 side_bar_n"> <!-- Nav bar here -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion fixed-top" id="accordionSidebar">
........
</ul>
</div>
<div class="col-sm-7"> <!-- Card grid -->
<div class="container grid_container">
<h1>Recherche de carte</h1>
<div class="row no-gutters">
<div class="col-sm-2"><img src="cards/287044.jpg" class="rounded grid_space img-fluid" alt="Cinque Terre"></div>
........
<div class="col-sm-2"><img src="cards/287044.jpg" class="rounded grid_space img-fluid" alt="Cinque Terre"></div>
</div>
</div>
</div>
<div class="col-sm-2"> <!-- Card display -->
<div class="container-fluid fixed-top">
<div class="card card_body">
<img class="card-img-top rounded" src="cards/368262.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">Rythme of the Wild</h4>
<p class="card-text">Creature spells you control can't be countered.
NonToken creatures you control have riot ( 1/ 1 or haste when entering the battlefield.)</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Ответ №1:
Удалите container-fluid fixed-top с отображения на карточке div…
Также увеличьте карточку col как col-sm-3
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<body data-spy="scroll" data-target=".navbar .fixed-top" data-offset="50">
<div class="container-fill main_container">
<div class="row no-gutters">
<div class="col-sm-2 side_bar_n">
<!-- Nav bar here -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion fixed-top" id="accordionSidebar">
........
</ul>
</div>
<div class="col-sm-7">
<!-- Card grid -->
<div class="container grid_container">
<h1>Recherche de carte</h1>
<div class="row no-gutters">
<div class="col-sm-2"><img src="cards/287044.jpg" class="rounded grid_space img-fluid" alt="Cinque Terre"></div>
........
<div class="col-sm-2"><img src="cards/287044.jpg" class="rounded grid_space img-fluid" alt="Cinque Terre"></div>
</div>
</div>
</div>
<div class="col-sm-3">
<!-- Card display -->
<div class="">
<div class="card card_body">
<img class="card-img-top rounded" src="cards/368262.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">Rythme of the Wild</h4>
<p class="card-text">Creature spells you control can't be countered. NonToken creatures you control have riot ( 1/ 1 or haste when entering the battlefield.)</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body> Комментарии:
1. Я хочу, чтобы мой столбец «zoom» был исправлен
2. Спасибо, но когда я делаю это, моя карточка не остается исправленной. Когда я прокручиваю, моя панель навигации не прокручивается, но прокручиваются мой столбец «масштаб» и сетка моей карты
Ответ №2:
Попробуйте добавить float-right класс в столбец, который вы хотите справа, а также добавьте clearfix класс ко всем разделам, классифицированным container . Я сделал это в следующем коде.
<body data-spy="scroll" data-target=".navbar .fixed-top" data-offset="50">
<div class="container-fill main_container clearfix">
<div class="row no-gutters">
<div class="col-sm-2 side_bar_n"> <!-- Nav bar here -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion fixed-top" id="accordionSidebar">
........
</ul>
</div>
<div class="col-sm-7"> <!-- Card grid -->
<div class="container grid_container clearfix">
<h1>Recherche de carte</h1>
<div class="row no-gutters">
<div class="col-sm-2"><img src="cards/287044.jpg" class="rounded grid_space img-fluid" alt="Cinque Terre"></div>
........
<div class="col-sm-2"><img src="cards/287044.jpg" class="rounded grid_space img-fluid" alt="Cinque Terre"></div>
</div>
</div>
</div>
<div class="col-sm-2 float-right"> <!-- Card display -->
<div class="container-fluid fixed-top clearfix">
<div class="card card_body">
<img class="card-img-top rounded" src="cards/368262.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">Rythme of the Wild</h4>
<p class="card-text">Creature spells you control can't be countered.NonToken creatures you control have riot ( 1/ 1 or haste when entering the battlefield.)</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Комментарии:
1. Я сделал это, но это остается неизменным, что бы я ни делал
2. Попробуйте использовать один div с контейнерным классом [у вас есть несколько divs с container class, некоторые с container-fluid ], который содержит несколько строк с несколькими столбцами, и добавьте необходимые классы в столбцы.