Я хочу сделать эту карту прокручиваемой по x. Но после трех блоков четвертый блок рендерится в новой строке. Я хочу прокрутить по горизонтали. Я перепробовал все за последние 5 дней.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta content="ie=edge" http-equiv="x-ua-compatible"> <title></title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="wrapper d-flex"> <div class="p-4 pt-5" id='content' style="width:100%"> <div class="container-fluid"> <div class="container-fluid"> <h2><strong>Please make this scrollable horizonally</strong></h2> <div class="card card-section"> <div class="card-header"> Heading </div> <div class="card-body"> <form method="post"> <div class='container-fluid'> <div class='row customClass'> <div class='col-md-4'> <div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div> </div> <div class='col-md-4'> <div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div> </div> <div class='col-md-4'> <div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div> </div> <div class='col-md-4'> <div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div> </div> </div> </div> </form> </div> </div> </div> </div> </div> </div> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </body> </html>
css:
.customClass { overflow-x: auto; white-space: nowrap; } .customClass .col-md-4 { display: inline-block; float: none; }
Кодовая ссылка: https://codepen.io/maharshi9999/pen/qBddebG
Bootstrap 4 использует flex. В случае, если вы хотите переопределить упаковочную строку строки Bootstrap, вы должны использовать flex-wrap: nowrap; для ряда. https://codepen.io/rohinikumar4073/pen/Exjjqzx
.row.customClass { overflow-x: auto; flex-wrap: nowrap; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta content="ie=edge" http-equiv="x-ua-compatible"> <title></title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="wrapper d-flex"> <div class="p-4 pt-5" id='content' style="width:100%"> <div class="container-fluid"> <div class="container-fluid"> <h2><strong>Please make this scrollable horizonally</strong></h2> <div class="card card-section"> <div class="card-header"> Heading </div> <div class="card-body"> <form method="post"> <div class='container-fluid'> <div class='row customClass'> <div class='col-md-4'> <div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div> </div> <div class='col-md-4'> <div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div> </div> <div class='col-md-4'> <div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div> </div> <div class='col-md-4'> <div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div> </div> </div> </div> </form> </div> </div> </div> </div> </div> </div> </body> </html>
Я удалил col-md-4 классы, а также установил ширину customClass.
col-md-4
customClass
.card-body { overflow-x: scroll; } .customClass { width: 1500px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta content="ie=edge" http-equiv="x-ua-compatible"> <title></title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="wrapper d-flex"> <div class="p-4 pt-5" id='content' style="width:100%"> <div class="container-fluid"> <div class="container-fluid"> <h2><strong>Please make this scrollable horizonally</strong></h2> <div class="card card-section"> <div class="card-header"> Heading </div> <div class="card-body"> <form method="post"> <div class='container-fluid'> <div class='row customClass'> <div class='col'> <div style='background-color:green;height: 500px; margin: 10px;'></div> </div> <div class='col'> <div style='background-color:green;height: 500px; margin: 10px;'></div> </div> <div class='col'> <div style='background-color:green;height: 500px; margin: 10px;'></div> </div> <di class='col'> <div style='background-color:green;height: 500px; margin: 10px;'></div> </di> </div> </div> </form> </div> </div> </div> </div> </div> </div> <!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script>--> </body> </html>
просто удалите класс строки. Используйте то, что вы только что удалили, этот класс как бум!
<div class='customClass'> <div class='col-md-4'>
, если хотите что-то отличное от вашего подхода, дайте мне знать. Удачи!