Ist es möglich, Bootstrap-Spalte "snap" an Ort und Stelle zu machen?

Ich spiele mit Bootstrap herum und bin auf ein kleines Problem gestoßen, für das ich keine Lösung finden kann. Es gibt wahrscheinlich eine Lösung da draußen, aber ich kann für mein Leben nicht herausfinden, wonach ich suchen soll.Ist es möglich, Bootstrap-Spalte "snap" an Ort und Stelle zu machen?

Was ich wissen möchte, ist, wenn es eine Möglichkeit gibt, die Spalten ineinander zu schnappen, so dass eine große Lücke nicht wie in der Geige unter dem ersten div auf der linken Seite angezeigt wird. Ich hoffe, die Geige beschreibt das Problem so gut, dass mir jemand in die richtige Richtung weist.

a big gap

Fiddle: https://jsfiddle.net/DTcHh/24238/

body { 
 
    background: tomato; 
 
} 
 
.container { 
 
    background: white; 
 
    border: 1px solid grey; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="col-md-6 container"> 
 
    <h3>Title</h3> 
 
    <p>Paragraph</p> 
 
    <div class="media-container"> 
 
     <a href="http://placehold.it/200x200"> 
 
     <img src="http://placehold.it/200x200" /> 
 
     </a> 
 
     <a href="http://placehold.it/200x200"> 
 
     <img src="http://placehold.it/200x200" /> 
 
     </a> 
 
     <a href="http://placehold.it/200x200"> 
 
     <img src="http://placehold.it/200x200" /> 
 
     </a> 
 
     <a href="http://placehold.it/200x200"> 
 
     <img src="http://placehold.it/200x200" /> 
 
     </a> 
 
     <a href="http://placehold.it/200x200"> 
 
     <img src="http://placehold.it/200x200" /> 
 
     </a> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-md-6 container"> 
 
    <h3>Title</h3> 
 
    <p>Paragraph</p> 
 
    <div class="media-container"> 
 
     <a href="http://placehold.it/200x200"> 
 
     <img src="http://placehold.it/200x200" /> 
 
     </a> 
 
     <a href="http://placehold.it/200x200"> 
 
     <img src="http://placehold.it/200x200" /> 
 
     </a> 
 
     <a href="http://placehold.it/200x200"> 
 
     <img src="http://placehold.it/200x200" /> 
 
     </a> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-md-6 container"> 
 
    <h3>Title</h3> 
 
    <p>Paragraph</p> 
 
    <div class="media-container"> 
 
     <a href="http://placehold.it/200x200"> 
 
     <img src="http://placehold.it/200x200" /> 
 
     </a> 
 
     <a href="http://placehold.it/200x200"> 
 
     <img src="http://placehold.it/200x200" /> 
 
     </a> 
 
     <a href="http://placehold.it/200x200"> 
 
     <img src="http://placehold.it/200x200" /> 
 
     </a> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-md-6 container"> 
 
    <h3>Title</h3> 
 
    <p>Paragraph</p> 
 
    <div class="media-container"> 
 
     <a href="http://placehold.it/200x200"> 
 
     <img src="http://placehold.it/200x200" /> 
 
     </a> 
 
     <a href="http://placehold.it/200x200"> 
 
     <img src="http://placehold.it/200x200" /> 
 
     </a> 
 
     <a href="http://placehold.it/200x200"> 
 
     <img src="http://placehold.it/200x200" /> 
 
     </a> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-md-6 container"> 
 
    <h3>Title</h3> 
 
    <p>Paragraph</p> 
 
    <div class="media-container"> 
 
     <a href="http://placehold.it/200x200"> 
 
     <img src="http://placehold.it/200x200" /> 
 
     </a> 
 
     <a href="http://placehold.it/200x200"> 
 
     <img src="http://placehold.it/200x200" /> 
 
     </a> 
 
     <a href="http://placehold.it/200x200"> 
 
     <img src="http://placehold.it/200x200" /> 
 
     </a> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-md-6 container"> 
 
    <h3>Title</h3> 
 
    <p>Paragraph</p> 
 
    <div class="media-container"> 
 
     <a href="http://placehold.it/200x200" /> 
 
     <img src="http://placehold.it/200x200" /> 
 
     </a> 
 
     <a href="http://placehold.it/200x200" /> 
 
     <img src="http://placehold.it/200x200" /> 
 
     </a> 
 
     <a href="http://placehold.it/200x200" /> 
 
     <img src="http://placehold.it/200x200" /> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2016-08-30 SeverinDK

Suchen Sie einen gemauerten-Typ (http://masonry.desandro.com/options.html) Ding? – rsn

Können Sie uns mehr über die "große Lücke" erzählen? Die Geige sieht für mich ziemlich normal aus. Es gibt einen Titel, etwas Inhalt und ein Trennzeichen. –

@rns - Ich werde mir das ansehen, sieht aus wie etwas, das ich benutzen könnte! Allerdings würde ich mich freuen, wenn Bootstrap so etwas anbietet. Ich brauche nicht die ganze schicke Animation, nur um sich so zu sortieren, wie es ist. – SeverinDK

Problem in der Bootstrap Gitterstruktur. Sie verwenden "Container" -Klasse unter "ROW" & "COL-MD-", so dass Sie das Problem haben.

Working fiddle: https://jsfiddle.net/amitmonsterme/veyq6naL/ 

view this tutorial : http://getbootstrap.com/css/#overview-container

Quelle

2016-09-02 13:09:57

Sie können die float: right Eigenschaft auf bestimmte Blöcke gelten, wenn die Bildschirmbreite 992px oder mehr wird. Ich habe eine neue spezielle Klasse .pull-md-right für diesen Zweck definiert.

Bitte überprüfen Sie das Ergebnis: https://jsfiddle.net/glebkema/9dqsj4pk/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
body { 
 
    background: tomato; 
 
} 
 

 
.container { 
 
    background: white; 
 
    border: 1px solid grey; 
 
} 
 

 
@media (min-width: 992px) { 
 
    .pull-md-right { 
 
    float: right !important; 
 
    } 
 
}

<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
      <h3>Title 1</h3> 
 
      <p>Paragraph</p> 
 
      <div class="media-container"> 
 
       <a href="#"><img src="http://placehold.it/200x200"></a> 
 
       <a href="#"><img src="http://placehold.it/200x200"></a> 
 
       <a href="#"><img src="http://placehold.it/200x200"></a> 
 
       <a href="#"><img src="http://placehold.it/200x200"></a> 
 
       <a href="#"><img src="http://placehold.it/200x200"></a> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-md-6"> 
 
      <h3>Title 2</h3> 
 
      <p>Paragraph</p> 
 
      <div class="media-container"> 
 
       <a href="#"><img src="http://placehold.it/200x200"></a> 
 
       <a href="#"><img src="http://placehold.it/200x200"></a> 
 
       <a href="#"><img src="http://placehold.it/200x200"></a> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-md-6 pull-md-right"> 
 
      <h3>Title 3</h3> 
 
      <p>Paragraph</p> 
 
      <div class="media-container"> 
 
       <a href="#"><img src="http://placehold.it/200x200"></a> 
 
       <a href="#"><img src="http://placehold.it/200x200"></a> 
 
       <a href="#"><img src="http://placehold.it/200x200"></a> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-md-6"> 
 
      <h3>Title 4</h3> 
 
      <p>Paragraph</p> 
 
      <div class="media-container"> 
 
       <a href="#"><img src="http://placehold.it/200x200"></a> 
 
       <a href="#"><img src="http://placehold.it/200x200"></a> 
 
       <a href="#"><img src="http://placehold.it/200x200"></a> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-md-6 pull-md-right"> 
 
      <h3>Title 5</h3> 
 
      <p>Paragraph</p> 
 
      <div class="media-container"> 
 
       <a href="#"><img src="http://placehold.it/200x200"></a> 
 
       <a href="#"><img src="http://placehold.it/200x200"></a> 
 
       <a href="#"><img src="http://placehold.it/200x200"></a> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-md-6"> 
 
      <h3>Title 6</h3> 
 
      <p>Paragraph</p> 
 
      <div class="media-container"> 
 
       <a href="#"><img src="http://placehold.it/200x200"></a> 
 
       <a href="#"><img src="http://placehold.it/200x200"></a> 
 
       <a href="#"><img src="http://placehold.it/200x200"></a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Quelle

2016-09-02 14:58:53

Ist es möglich, Bootstrap-Spalte "snap" an Ort und Stelle zu machen?

Antwort

Verwandte Themen