Bootstrap Gitter bricht auf xs Ansichtsfenster

Ich versuche, 4 Bilder horizontal (4x1) auf kleine und größere Ansichtsfenster, und in einem 2x2 Gitter auf x-kleine Ansicht Ports anzuordnen.Bootstrap Gitter bricht auf xs Ansichtsfenster

Allerdings schwebt das dritte Bild rechts, wenn ich die Größe auf xs ändern.

Ich habe versucht, alle anderen Klassen, die ich hinzugefügt habe, zu entfernen und die Bilder zu ändern, aber ohne Erfolg.

<div class="row margin-100-top margin-100-bot"> 
     <div class="col-sm-3 col-xs-6 margin-10-eql"> 
      <img src="/wp-content/themes/canvas-child/images/nw_csr_volunteering.jpg" alt=""> 
     </div> 
     <div class="col-sm-3 col-xs-6 margin-10-eql"> 
      <img src="/wp-content/themes/canvas-child/images/nw_manchester_volunteering.jpg" alt=""> 
     </div> 

     <div class="col-sm-3 col-xs-6 margin-10-eql"> 
      <img src="/wp-content/themes/canvas-child/images/nw_manchester_volunteers.jpg" alt=""> 
     </div> 
     <div class="col-sm-3 col-xs-6 margin-10-eql"> 
      <img src="/wp-content/themes/canvas-child/images/nw_leeds_volunteering.jpg" alt=""> 
     </div> 
    </div>

https://dev.benefacto.org/north/

(Meine Margin-Klassen hinzufügen, nur Marge über, FYI)

Vielen Dank für Ihre Hilfe,

Ben

Quelle

2017-11-30 Ben Darlington

das ist, weil 4 x 6 nicht = 12. Alle Spalten in einem Raster müssen bis zu 12 – ProEvilz

summieren Dank für Ihre Antwort. Ich bin mir bewusst, dass 4x6 nicht 12 ergibt; was ich suche ist auf einem xs-Bildschirm-Port Ich werde eine Reihe von zwei col-xs-6-Blöcke haben, und dann die nächsten zwei Blöcke in der Reihe unter. Ist das problematisch? –

Eine Alternative zu yaylitzis Antwort ist der unteren Rand von Bild ein wie folgt zu entfernen:

<div class="row margin-100-top margin-100-bot"> 
    <div class="col-sm-3 col-xs-6" style="margin-top:10px"> 
     <img src="/wp-content/themes/canvas-child/images/nw_csr_volunteering.jpg" alt="corporate volunteers in Liverpool"> 
    </div> 
    <div class="col-sm-3 col-xs-6 margin-10-eql"> 
     <img src="/wp-content/themes/canvas-child/images/nw_manchester_volunteering.jpg" alt="corporate volunteers in Manchester"> 
    </div> 

    <div class="col-sm-3 col-xs-6 margin-10-eql"> 
     <img src="/wp-content/themes/canvas-child/images/nw_manchester_volunteers.jpg" alt="corporate volunteers in Sheffield"> 
    </div> 
    <div class="col-sm-3 col-xs-6 margin-10-eql"> 
     <img src="/wp-content/themes/canvas-child/images/nw_leeds_volunteering.jpg" alt="Corporate Volunteers in Leeds"> 
    </div> 

    <div class="row"> 

     <div class="col-xs-12 col-xs-offset-0"> 
      <h1 class="white margin-30-top text-center big">Benefacto helps people organise and run meaningful 
       employee volunteering programmes in Manchester, Leeds, Liverpool and Sheffield.</h1> 
     </div> 

    </div> 
</div>

Der Grund, warum ich finde das besser ist es, Sie und damit alles zu beeinflussen innen nicht mit einem ganzen Container Messing. Sie beheben stattdessen das Problem, das Sie mit einem einzelnen Element haben.

Quelle

2017-12-01 12:37:30

Ich war ein ähnliches Problem hat und es Es stellte sich heraus, dass die Ursache (sehr) leicht unterschiedliche Höhen an den verschiedenen Säulen waren. Dies scheint auch Ihr Fall zu sein, denn nw_manchester_volunteering.jpg ist genau 1 Pixel kürzer als die anderen Bilder.

hoffe, das hilft :-D

Quelle

2017-12-01 12:12:27

In der Klasse .container-fluid, wenn Sie die padding-left:15px; oder padding-right:15px; Attribut löschen dann die Bilder auszurichten, wie Sie erwarten.

Alternativ können Sie entweder padding-left:15px;, entweder padding-right:15px; aus der Klasse container löschen, die in .container-fluid oder erstellen Sie eine neue Klasse für diesen Abschnitt der Website verschachtelt ist, wo Sie die unten padding-left:0px; oder padding-right:0px; wie haben:

<div class="container-fluid purple-back"> 
    <div class="container" style="padding-right:0px;"> 
     <div class="row margin-100-top margin-100-bot"> 
      <div class="col-sm-3 col-xs-6 margin-10-eql"> 
       <img src="/wp-content/themes/canvas-child/images/nw_csr_volunteering.jpg" alt="corporate volunteers in Liverpool"> 
      </div> 
      <div class="col-sm-3 col-xs-6 margin-10-eql"> 
       <img src="/wp-content/themes/canvas-child/images/nw_manchester_volunteering.jpg" alt="corporate volunteers in Manchester"> 
      </div> 

      <div class="col-sm-3 col-xs-6 margin-10-eql"> 
       <img src="/wp-content/themes/canvas-child/images/nw_manchester_volunteers.jpg" alt="corporate volunteers in Sheffield"> 
      </div> 
      <div class="col-sm-3 col-xs-6 margin-10-eql"> 
       <img src="/wp-content/themes/canvas-child/images/nw_leeds_volunteering.jpg" alt="Corporate Volunteers in Leeds"> 
      </div> 

      <div class="row"> 
       <div class="col-xs-12 col-xs-offset-0"> 
        <h1 class="white margin-30-top text-center big">Benefacto helps people organise and run meaningful 
         employee volunteering programmes in Manchester, Leeds, Liverpool and Sheffield.</h1> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

Eine weitere Lösung ist die Antwort der Pol Del Aguila zu folgen und die gleichen Abmessungen für alle Ihre Bilder zu verwenden.

Quelle

2017-12-01 12:26:54 yaylitzis

Bootstrap Gitter bricht auf xs Ansichtsfenster

Antwort

Verwandte Themen