调整浏览器大小时引导按钮出现问题

Question

我的html中有这个

.btn {
  height: 100%;
  font-size: 10em;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid  mb-5">
  <div class="row ">
    <div class="col pl-0 pr-0 ml-5">
      <button type="button" class="btn btn-primary btn-block">ONE</button>
    </div>
    <div class="col pl-0 pr-0 ml-5">
      <button type="button" class="btn btn-primary btn-block">TWO</button>
    </div>
    <div class="col pl-0 pr-0 ml-5 mr-5">
      <button type="button" class="btn btn-primary btn-block">THREE</button>
    </div>
  </div>
</div>

我遇到的问题是，当我调整浏览器大小时，按钮会粘在右侧并彼此粘在一起。在这里可以做什么？任何帮助表示赞赏！

Answer 1

请在您的浏览器中运行此程序，而不要使用摘要来获得更好的响应

请参阅我已更改您代码中的一件事。我所做的只是为div类添加了 col-sm 。您可以通过此链接找到有关引导网格系统的更多信息。 Bootstrap grid system。

我想你期望如此。

要查看结果，请展开代码段，然后在浏览器中使用Inspect Element，然后导航至移动视图。谢谢

更新

除了您在聊天中询问的内容之外，我还添加了一些自定义CSS，以响应增加字体大小。刚刚添加了style="font-size:5vw;"。可以使用vw单位设置文本大小，即“视口宽度”。

这样，文本大小将遵循浏览器窗口的大小：

这是添加style="font-size:5vw;"

后的新视图

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid  mb-5 ">
       <div >
    <div class="container-fluid  mb-5 ">
      <div class="row ">
      <div class="col pl-0 pr-0 ml-5 col-sm-3">
          <button type="button"  style="font-size:5vw;" class=" btn btn-primary btn-block">ONE</button>
      </div>
      <div class="col pl-0 pr-0 ml-5 col-sm-3">
          <button type="button"  style="font-size:5vw;" class=" btn btn-primary btn-block">TWO</button>
      </div>
      <div class="col pl-0 pr-0 ml-5 mr-5 col-sm-3">
          <button type="button"  style="font-size:5vw;" class=" btn btn-primary btn-block">THREE</button>
      </div>
</div>