モバイルでブートストラップボタンが画面幅外に出る

Question

私のブートストラップボタンがモバイル上で画面幅外になります。モバイルで正しくレンダリングできるように修正するにはどうすればよいですか？何らかの理由で、モバイルボタンが画面の右側に表示され、背景画像が画面の幅を縮小するため、背景の画像が縮小されます。

は、ここに私のHTMLです：

<!-- Header --> 
<div class="intro-header"> 
    <div class="container"> 

     <div class="row"> 
      <div class="col-lg-7"> 
       <div class="intro-message"> 
        <h1>Fruit Exchange</h1><br> 
        <p class="subtitle">In botany, a fruit is the seed-bearing structure in flowering plants (also known as angiosperms) formed from the ovary after flowering.</p> 
        <p class="intro-divider"></p> 
        <a href="https://en.wikipedia.org/wiki/Fruit" class="btn btn-primary btn-lg">Register Now to Buy Fruit from Our Warehouse</a> 
       </div> 
      </div> 
     </div> 

    </div> 
    <!-- /.container --> 

</div> 
<!-- /.intro-header --> 

ここに私のCSSです：

.intro-header { 
    padding-top: 50px; 
    padding-bottom: 50px; 
    text-align: left; 
    color: #f8f8f8; 
    background: url(http://cdn.tutorialzine.com/wp-content/uploads/2015/06/bootstrap-examples.jpg) no-repeat center center; 
    background-size: cover; 



    .intro-message { 
    position: relative; 
    padding-top: 20%; 
    padding-bottom: 20%; 
} 

    .subtitle { 
    font-family: 'Merriweather', serif; 
    font-weight: 400; 
    font-size: 23px; 
    color: #ffffff; 
    letter-spacing: 0.2px; 
    line-height: 1.5; 
} 

    .intro-divider { 
    width: 400px; 
    border-top: 3px solid #ffffff; 
    border-bottom: 1px solid rgba(0,0,0,0); 
    margin: 41px 0 50px 0; 
} 

    /* Button */ 

.btn { 
    padding: 14px 24px; 
    border: 0 none; 
    font-weight: 700; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
} 

.btn:focus, .btn:active:focus, .btn.active:focus { 
    outline: 0 none; 
} 

.btn-primary { 
    background: #DB4632; 
    color: #ffffff; 
} 

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { 
    background: #DB4632; 
} 

.btn-primary:active, .btn-primary.active { 
    background: #DB4632; 
    box-shadow: none; 
} 

Answer 1

あなたのCOL-LG-7は、小さな画面に適用されていません。サイズに適したクラスを追加し、クラスがカスケードすることを忘れないでください。 col-xs-7を試して、それが許容できるかどうか見てみましょう。

Answer 2

このHTMLに変更してください。 col-md-12とcol-xs-12で遊ぶことができます

<!-- Header --> 
<div class="intro-header"> 
    <div class="container"> 

     <div class="row"> 
      <div class="col-lg-7 col-md-12 col-xs-12"> 
       <div class="intro-message"> 
        <h1>Fruit Exchange</h1><br> 
        <p class="subtitle">In botany, a fruit is the seed-bearing structure in flowering plants (also known as angiosperms) formed from the ovary after flowering.</p> 
        <p class="intro-divider"></p> 
        <a href="https://en.wikipedia.org/wiki/Fruit" class="btn btn-primary btn-lg">Register Now to Buy Fruit from Our Warehouse</a> 
       </div> 
      </div> 
     </div> 

    </div> 
    <!-- /.container --> 

</div> 
<!-- /.intro-header -->