引導按鈕超出屏幕寬度在手機上

我的引導按鈕超出屏幕寬度。我如何解決它，以便在移動設備上正確呈現？出於某種原因，移動按鈕離開屏幕右側，背景圖像縮小其寬度，因此它不覆蓋屏幕的整個寬度。引導按鈕超出屏幕寬度在手機上

這裏是我的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; 
}

來源

2016-04-14 huskydawgs

你COL-LG-7沒有被應用到更小的屏幕。添加適合大小的類，並記住類會級聯。嘗試col-xs-7，看看是否可以接受的外觀。

來源

2016-04-14 20:24:42

嘗試更改爲此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 -->

來源

2016-04-14 20:29:03

引導按鈕超出屏幕寬度在手機上

回答

相關問題