Question

我练习bootstrap按钮。我已经写了以下代码

<div class="row">
     <div class="col-md-1"></div>
        <div class="col-md-5">
            <button class="btn btn-success performanceButton">Best case performance</button>
        </div>
        <div class="col-md-6">  </div>
</div>

<div class="row">
    <div class="col-md-1"></div>
        <div class="col-md-5">
            <button class="btn btn-warning performanceButton">Average case performance </button>
        </div>
    <div class="col-md-6"> </div>
</div>

代码运行良好，但是当我通过缩小浏览器来测试它的小屏幕尺寸时，似乎第二个按钮中的文本扩展了按钮。

以下是该问题的截屏。

https://gist.github.com/bmorelli25/e8069ac084348ca44207d16f5cd5d6cc#file-puppeteer-js

有谁知道如何解决这个问题？提前谢谢你:)

Answer 1

通过为您的按钮提供min-width属性，它不会中断。

＆＃13;

button {
  min-width: 200px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-1"></div>
  <div class="col-md-5">
    <button class="btn btn-success performanceButton">Best case performance</button>
  </div>
  <div class="col-md-6"> </div>
</div>

<div class="row">
  <div class="col-md-1"></div>
  <div class="col-md-5">
    <button class="btn btn-warning performanceButton">Average case performance </button>
  </div>
  <div class="col-md-6"> </div>
</div>

＆＃13;

Answer 2

你需要为较小的屏幕增加你的列，试试这个：

    <div class="row">
     <div class="col-md-1"></div>
        <div class="col-sm-8 col-md-5">
            <button class="btn btn-success performanceButton">Best case performance</button>
        </div>
        <div class="col-sm-3 col-md-6">  </div>
</div>

<div class="row">
    <div class="col-sm-1 col-md-1"></div>
        <div class="col-sm-8 col-md-5">
            <button class="btn btn-warning performanceButton">Average case performance </button>
        </div>
    <div class="col-sm-3 col-md-6"> </div>
</div>

Answer 3

你也可以让按钮的文本换行而不是让按钮变大只需在 css 中添加类似类的 jive 按钮

    .wrapit{
             width: 30px;
             white-space: normal;
             word-Wrap: break-word;
            }

文本超出按钮边框

3 个答案: