Как зафиксировать ширину колонки в bootstrap 4?

287

09 апреля 2022, 12:00

Есть вот такой макет

<div className='container app'>
<div className="row align-items-center justify-content-center content">
  <div className="col-7 col-content">
    <div className="row top-panel">
      <div className="col-8 left"></div>
      <div className="col right"></div>
    </div>
    <div className="row main">
      <div className="col-7 left"></div>
      <div className="col right"></div>
    </div>
  </div>
</div>

Это учебный проект будущего SPA приложения. Как сделать так, чтобы ширина колонки col-content оставалась одинаковой при любых размера экрана( при маленьких размерах появлялась полоса прокрутки)?

Answer 1

уберите из класса col-7

Добавьте width:750px; (нужную вам ширину) к классу col-content и overflow-x:auto; к content.

Ещё можно не убирать col-7, тогда добавить min-width:750px (запретить становиться элементу меньше чем 750px) и опять же добавить overflow как описано выше.

Сделал пример кода. Не понимаю почему в вашей разметке className вместо нормального class, подозреваю что это какой-то фреймворк для мобильника по типу ionic.

.content { 
  overflow-x: auto; 
  text-align:center; 
} 
 
.col-content { 
  min-width: 750px; 
  background:#c3fffc; 
  padding:30px 0px; 
  border:1px solid #000; 
} 
.left{    background: #e8c3ff; 
    border: 1px solid #000; 
    padding: 30px 0px; 
    margin-top:15px; 
} 
.right{ 
  background:#ddffc3; 
  border:1px solid #000; 
    padding: 30px 0px; 
    margin-top:15px; 
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
<div class='container app'> 
  <div class="row align-items-center justify-content-center content"> 
    <div class="col-7 col-content"> 
    col-content 
      <div class="row top-panel"> 
        <div class="col-8 left">left</div> 
        <div class="col right">right</div> 
      </div> 
      <div class="row main"> 
        <div class="col-7 left">left (main)</div> 
        <div class="col right">right (main)</div> 
      </div> 
    </div> 
  </div>