Bootstrap 4.2.1 Колонка макета Flex-box переполняет край браузера - PullRequest
Новая
       5

Bootstrap 4.2.1 Колонка макета Flex-box переполняет край браузера

0 голосов
/ 27 декабря 2018

Использование flex-based для ширины столбца.Почему COLUMN02 выходит за рамки браузера?Что я делаю неправильно?К сожалению, здесь он не отображается в фрагментах кода, а в скрипте.TIA!

http://jsfiddle.net/dragontheory/37b8vkoa/1/

html,
body {
  min-height: 100vh;
  /* force footer to bottom of browser */
  height: 100%;
  /*for IE11*/
}

.page-header,
.page-footer {
  padding: 20px 10px;
  background-color: rgba(0, 0, 0, 0.3);
}

.column01 {
  -webkit-box-flex: 0 0 200px;
  -ms-flex: 0 0 200px;
  flex: 0 0 200px;
  background-color: rgba(0, 0, 0, 0.1);
}

.column02 {
  -webkit-box-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  background-color: rgba(0, 0, 0, 0.2);
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body class="container-fluid d-flex flex-column px-0">
  <div class="page-footer p-2">HEADER</div>
  <main class="row flex-fill no-gutters flex-nowrap">
    <div class="col column01 d-flex flex-column">COLUMN01</div>
    <div class="col column02 d-flex flex-column">COLUMN02</div>
  </main>
  <div class="page-footer p-2">FOOTER</div>
</body>

1 Ответ

0 голосов
/ 27 декабря 2018

Это ваш пользовательский CSS, который вызывает это: 

 .column02 {
   flex: 0 0 auto;
 }
 .col {
   width: 100%;
 }

... что означает:

  • flex-grow: 0 (не позволяйте flex увеличивать этот элемент)
  • flex-shrink: 0 (не позволяйте flex сжимать этот элемент)
  • flex-basis: auto (получить flex-basis из width - значение 100% для .col)

Который блокирует width этого столбца к width его родителя и не позволяет уменьшить его, несмотря на тот факт, что сумма width s детей превышает width родительского.

Установка любой из следующих на .column02 исправит это:

  • flex-shrink: 1
  • width: auto; flex-grow: 1;
  • flex-basis: 0; flex-grow: 1;
  • flex: 1;

Или просто удалить flex: 0 0 auto; (потому что .col уже устанавливает flex-basis: 0; flex-grow: 1; - третий случай выше).

Добавление:

Для работы панелей с изменяемым размером я рекомендую размещать всю необходимую разметкувнутри одного столбца: 

$(function() {
  $(".panel-left").resizable({
    handleSelector: ".splitter",
    resizeHeight: false
  });
})
html,
body {
  min-height: 100vh;
  height: 100%;
}

.page-header,
.page-footer {
  padding: 20px 10px;
  background-color: rgba(0, 0, 0, 0.3);
}

.panel-left {
  flex: 0 0 auto;
  padding: 10px;
  width: 300px;
  min-height: 200px;
  min-width: 210px;
  white-space: nowrap;
  background: #838383;
  color: white;
}

.splitter {
  flex: 0 0 auto;
  width: 18px;
  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
  min-height: 120px;
  cursor: col-resize;
}

.panel-right {
  flex: 1 1 auto;
  padding: 10px;
  width: 100%;
  min-height: 200px;
  min-width: 200px;
  background: #eee;
}

.panel-container {
  display: flex;
  flex-direction: row;
  border: 1px solid silver;
  overflow: hidden;
  xtouch-action: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>

<body class="container-fluid d-flex flex-column px-0">
  <div class="page-footer p-2">HEADER</div>
  <main class="row flex-fill no-gutters flex-nowrap">
    <div class="col panel-container">
      <div class="panel-left">
        left panel
      </div>
      <div class="splitter">
      </div>
      <div class="panel-right">
        right panel
      </div>
    </div>
  </main>
  <div class="page-footer p-2">FOOTER</div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...