Question

在桌面上，我的按钮看起来很棒。当我转到移动版时，按钮超出屏幕宽度，如下所示：

1）如何根据我的bootply和下面的代码来防止这种情况发生

2）如何为按钮添加上边距。

这是我的bootply： http://www.bootply.com/KChuJgr967

这是我的HTML：

＆＃13;

.content-section-d {
  padding: 50px 0 0 0;
}
.centered-text {
  text-align: center
}
/* Buttons */

.btn,
.btn:link,
.btn:visited {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  padding: 15px 40px;
  background-color: #db4632;
  font-size: 20px;
  letter-spacing: 0;
  text-transform: uppercase;
  border-color: #db4632;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}
.btn:active,
.btn:hover {
  background-color: #db4632;
}

＆＃13;

<div class="content-section-d">

  <div class="container">
    <div class="row centered-text">
      <div class="col-md-4 col-xs-12">
        <h3>4,000,000+</h3>
      </div>
      <div class="col-md-4 col-xs-12">
        <h3>1,500,000+</h3>
      </div>
      <div class="col-md-4 col-xs-12">
        <h3>150,000+</h3>
      </div>
    </div>
    <div class="row centered-text">
      <div class="col-md-4 col-xs-12">
        <h3>68,000+</h3>
      </div>
      <div class="col-md-4 col-xs-12">
        <h3>2,000+</h3>
      </div>
      <div class="col-md-4 col-xs-12">
        <h3>3 years</h3>
      </div>
    </div>
    <div class="col-lg-12 text-center">
      <a href="https://www.apple.com" target="_blank" class="btn btn-primary btn-lg">Register for a Free Account</a>
    </div>

  </div>
  <!-- /.container -->
</div>
<!-- /.content-section-d -->

＆＃13;

Answer 1

因此，正如我在评论中指出的那样，您需要使用@media。

此处为您的按钮代码，您应将其添加到样式表中。

@media(max-width: 1200px) {
    .btn span {
        display: block;
        max-width: 200px;
        white-space: normal;
    }
}

另外，不要忘记向按钮添加<span>。现在按钮代码是：

<button href="https://www.apple.com" target="_blank" class="btn btn-primary btn-lg"><span>Register for a Free Account</span></button>

here是关于JSFiddle的完整工作示例。

P.S。将max-width中的@media更改为您的财产。

Answer 2

您可以使用vw和vh CSS规则根据屏幕大小更改文本大小。在你的情况下，如果你添加这个：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="outer-table">
  <tbody>
    <tr>
      <td>


        <table id="inner-table">
          <tbody>
            <tr>
              <td>
                <p style="display:inline-block">Enter first complain:</p>
                <input type="text" />
              </td>
            </tr>
          </tbody>

          <tfoot>
            <tr>
              <td>
                <button class="add" id="add">Add Textfield</button>
                <button class="remove" id="remove">Remove Textfield</button>
              </td>
            </tr>
          </tfoot>
        </table>



      </td>
    </tr>
  </tbody>



  <tfoot>
    <tr>
      <td>Table Footer</td>
    </tr>
  </tfoot>

</table>

效果很好。（使用数值来获得你需要的东西）

Bootstrap按钮在移动设备上离开页面

2 个答案: