モバイルのページでブートストラップボタンがオフになる

Question

デスクトップでは、自分のボタンが大きく見えます。私はモバイル版に行くとき、ボタンは以下のような画面幅の外に行く：

1）どのように私は私bootplyと

2以下のコードに基づいて起こってからこれを維持します）どのようにボタンにも上マージンを追加しますか？ここで

は私のbootplyです： http://www.bootply.com/KChuJgr967

ここに私のhtmlです：

あなたは、画面サイズに合わせてテキストのサイズを変更するにはVWとVH CSSルールを使用することができます

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

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

Answer 1

。あなたの場合は、これを追加する場合：

font-size:3vw; 
    font-size:1.8vh; 

これはかなりうまくいきます。 （あなたが必要とするものを得るために値で遊ぶ）

Answer 2

したがって、私がコメントで指摘したように、@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.あなたの財産に@mediaのmax-widthを変更してください。