Bootstrap-Taste geht außerhalb der Bildschirmbreite auf Handy

Question

Meine Bootstrap-Taste geht außerhalb der Bildschirmbreite auf Handy. Wie behebe ich das Problem, damit es auf Mobilgeräten korrekt wiedergegeben wird? Aus irgendeinem Grund ist die mobile Schaltfläche nicht auf dem Bildschirm rechts und das Hintergrundbild verkleinert seine Breite, so dass es nicht die gesamte Breite des Bildschirms bedeckt.

Hier ist mein 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 --> 

Hier ist meine 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

Ihre col-lg-7 ist nicht auf den kleineren Bildschirm angewendet wird. Fügen Sie eine Klasse hinzu, die für die Größe geeignet ist, und denken Sie daran, dass Klassen in Kaskade gehen. Versuchen Sie Col-Xs-7 und sehen Sie, ob das eine akzeptable Erscheinung ist.

Answer 2

Versuchen Sie, zu diesem HTML zu wechseln. Sie können mit col-md-12 und 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 --> 

spielen