Bootstrap btn块宽度以适合屏幕

时间：2020-03-17 11:28:01

标签： css bootstrap-4

Bootstrap按钮超出了屏幕，无法找出解决方法。

这里是plunker 

<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 个答案:

答案 0 :(得分：4)

这是因为按钮的空白。将display flex属性添加到您的footer类中。通过在div内包含具有所需边距的button元素，可以解决此问题。

.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>

相关问题
最新问题