Bootstrap-Vorlage kann Text Foto Overlay

Question

Ich versuche, ein Problem mit der Verwendung einer Bootstrap-Vorlage für mobile zu beheben ...

I nie der Text, ein Bild zu überlagern über, Ich kann jedoch keine klare Antwort darauf finden, wie ich es vermeiden kann. Hier

ist der Code zur Zeit:

<div class="banner-bottom" id="photos"> 
    <div class="container"> 
     <div class="bottom-grids"> 
      <div class="col-md-3 bottom-grid"> 
       <img src="images/bed.jpg" height="200px"> 
      </div> 
      <div class="col-md-3 bottom-grid"> 
       <p><b>Philosophy:</b><br> We believe meaningful activities provide an atmosphere of good health and spiritual well-being. The activity program is designed to offer opportunities for friendship and self-worth.</p> 
      </div> 
      <div class="col-md-3 bottom-grid"> 
       <img src="images/entry.jpg" height="200px"> 
      </div> 
      <div class="col-md-3 bottom-grid"> 
       <p><b>Location:</b><br>Located just minutes from downtown Sacramento. Near the Jefferson Boulevard & West Capital Avenue intersection. Close to shopping, churches and senior centers.</p> 
      </div> 
      <div class="clearfix"></div> 
     </div> 
    </div> 
</div> 

Es gibt nichts heikel in der CSS - typisches Bootstrap 25% Breite für col-MD-3.

.col-md-3 { 
    width: 25%; 
    } 

Wie kann ich meine Textbereiche gut genug definieren, damit sie meine Bilder nicht überlagern? Ich würde annehmen, jedes Div als Col-md-3 mit einer Breite von 25% würde ausreichen, um dieses Problem zu vermeiden, aber ich vermisse offensichtlich etwas.

Answer 1

Sie sollten nur innerhalb row Klasse Elemente col-** Klassen verwenden. col-** Klassen sind Floated Elemente und row Klasse hat alle clearfix Stile und negative Ränder benötigt. Etwas wie folgt aus:

<div class="banner-bottom" id="photos"> 
<div class="container"> 
    <div class="row bottom-grids"> 
     <div class="col-md-3 col-sm-3 bottom-grid"> 
      <img src="images/bed.jpg" height="200px"> 
     </div> 
     <div class="col-md-3 col-sm-3 bottom-grid"> 
      <p><b>Philosophy:</b><br> We believe meaningful activities provide an atmosphere of good health and spiritual well-being. The activity program is designed to offer opportunities for friendship and self-worth.</p> 
     </div> 
     <div class="col-md-3 col-sm-3 bottom-grid"> 
      <img src="images/entry.jpg" height="200px"> 
     </div> 
     <div class="col-md-3 col-sm-3 bottom-grid"> 
      <p><b>Location:</b><br>Located just minutes from downtown Sacramento. Near the Jefferson Boulevard & West Capital Avenue intersection. Close to shopping, churches and senior centers.</p> 
     </div> 
     <div class="clearfix"></div> 
    </div> 
</div> 

Auch Bootstrap tut viel Arbeit für Sie und ich bin sicher, dass Sie nicht diese .bottom-grid Klassen benötigen und class="clearfix"div dort. Halten Sie es so einfach wie möglich und Sie werden sehen, dass Sie Verbesserungen vornehmen.

Eine weitere Sache ist, geben Sie Ihre img Elemente max-width: 100%; height: auto;, weil sie jetzt ihre Eltern col- Container überlappen.

Answer 2

Versuchen Sie die Verwendung der Klasse "Zeile" und für kleinere Bildschirm verwenden Sie "col-sm- *" basierend auf Ihrer Notwendigkeit, anzuzeigen.

Dies ist nur ein Beispiel bearbeiten Sie mit etwas beginnen zu helfen:

<div class="banner-bottom" id="photos"> 
<div class="container"> 
    <div class="row bottom-grids"> 
     <div class="col-md-3 col-sm-3 bottom-grid"> 
      <img src="images/bed.jpg" height="200px"> 
     </div> 
     <div class="col-md-3 col-sm-3 bottom-grid"> 
      <p><b>Philosophy:</b><br> We believe meaningful activities provide an atmosphere of good health and spiritual well-being. The activity program is designed to offer opportunities for friendship and self-worth.</p> 
     </div> 
     <div class="col-md-3 col-sm-3 bottom-grid"> 
      <img src="images/entry.jpg" height="200px"> 
     </div> 
     <div class="col-md-3 col-sm-3 bottom-grid"> 
      <p><b>Location:</b><br>Located just minutes from downtown Sacramento. Near the Jefferson Boulevard & West Capital Avenue intersection. Close to shopping, churches and senior centers.</p> 
     </div> 
     <div class="clearfix"></div> 
    </div> 
</div> 

Answer 3

Bitte class="img-responsive"-img Tag wie unten

Sie Höhe img-Tag nicht gesetzt fügen Sie.

<div class="banner-bottom" id="photos"> 
    <div class="container"> 
     <div class="bottom-grids"> 
      <div class="col-md-3 bottom-grid"> 
       <img class="img-responsive" src="images/bed.jpg"> 
      </div> 
      <div class="col-md-3 bottom-grid"> 
       <p><b>Philosophy:</b><br> We believe meaningful activities provide an atmosphere of good health and spiritual well-being. The activity program is designed to offer opportunities for friendship and self-worth.</p> 
      </div> 
      <div class="col-md-3 bottom-grid"> 
       <img class="img-responsive" src="images/entry.jpg"> 
      </div> 
      <div class="col-md-3 bottom-grid"> 
       <p><b>Location:</b><br>Located just minutes from downtown Sacramento. Near the Jefferson Boulevard & West Capital Avenue intersection. Close to shopping, churches and senior centers.</p> 
      </div> 
      <div class="clearfix"></div> 
     </div> 
    </div> 
</div>