在调整浏览器大小时，引导按钮有问题。

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。您可以通过这个链接找到更多关于引导网格系统的信息。自举网格系统。

我想你会料到的。

​

​

要查看结果，请扩展代码段，然后在浏览器中使用检查元素，然后导航到移动视图。谢谢

更新

除了您在聊天中询问的内容外，我还添加了一些自定义css，以响应增加字体大小的要求。刚添加的style="font-size:5vw;".The文本大小可以用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>

​