Bootstrap ширина блока btn по размеру экрана - PullRequest
Новая
       0

Bootstrap ширина блока btn по размеру экрана

2 голосов
/ 17 марта 2020
Кнопка

Bootstrap выходит за пределы экрана и не может понять, как это исправить.

Вот поршень 

<div class="bigone">

    <div class="mybar">Nav bar</div>

    <div class="main">Main bar</div>

    <div class="footer">
      <button class="mx-2 my-2 btn btn-block btn-sm btn-danger">Testing</button>
    </div>

</div>

Ниже следует css

.bigone {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.main {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

Спасибо

1 Ответ

4 голосов
/ 17 марта 2020

Это из-за поля кнопки. Добавьте свойство display flex в ваш класс footer. Это решит проблему, поместив элемент кнопки в элементе div с необходимым полем. 

.footer {
  display: flex;
}

Рабочий пример. 

.bigone {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.main {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}
.footer {
  display: flex;
}
<link data-require="bootstrap@4.0.0-alpha.6" data-semver="4.0.0-alpha.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="tether@1.4.0" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>

<div class="bigone">

  <div class="mybar">
    Nav bar
    </br>something else
  </div>

  <div class="main">
    <div class="container-fluid">
      <div class="row">

        <div class="col-12">
          <h1>FIRST LINE</h1> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> So many words, so many words. So many words, so many words. So many words, so many words.
          <br> 
          <h1>LAST LINE</h1>
        </div>

      </div>
    </div>
  </div>

  <div class="footer">
    <button class="mx-2 my-2 btn btn-block btn-sm btn-danger">Testing</button>
  </div>

</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...