Bootstrap col-md-3

CuzImCloud · 23. März 2018

Guten Tag,

derzeit nutze ich Bootstrap zum erstellen meiner Seite. Ich habe von Bootstrap die Klasse "col-md-3" verwendet um 4 Modals von Bootstrap in 1 Reihe zu haben.

Das sieht derzeit so aus:

[Blockierte Grafik: https://abload.de/img/col.msd-38opfk.png]

Mir passt das soweit auch ganz gut so.

Jedoch weiß ich nicht wie ich die Abstände zwischen den Dingern verringern kann.

Derzeit habe ich 4 Modals welche so aussehen:

Code

<div class="col-md-3">
                    
        <button type="button" class="btn btn-info btn-lg" style="outline: 0" data-toggle="modal" data-target="#myModal3">Designer</button>

        <!-- Modal -->
        <div id="myModal3" class="modal fade" role="dialog">
          <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title-dzn">Voraussetzungen für den<span> Designer:</span> Rang:</h4>
              </div>
              <div class="modal-body" style ="text-align: left">
                <p class="standard">Standard Voraussetzungen:</p>
                <hr>
                <p>➥ Mindestalter: 14 Jahre</p>
                <p>➥ Du musst TeamSpeak3 & Discord besitzen. [PFLICHT]</p>
                <p>➥ Ein Mikrofon mit guter Qualität</p>
                <p>➥ Aktivität auf dem Netzwerk und TeamSpeak3 Server</p>
                <p>➥ Du musst Geistliche Reife besitzen.</p>
                <p>➥ Du musst gut mit dem Team zusammenarbeiten können.</p>
                <hr>
                <br>
                <p class="rangintern">Rang Spezifische Voraussetzungen:</p>
                <hr>
                <p>➥ Vorkenntnisse im Designen besitzen.</p>
                <p>➥ Aktivität beim Designen auf dem Server.</p>
                <p>➥ Du musst eigene Ideen und viel Kreativität besitzen.</p>
                <hr>
                <br>
                <p class="geweckt">Wir haben deine Interesse geweckt? Dann Bewirb dich jetzt bei uns!<p>
              </div>
              <div class="modal-footer">
                <center><button type="button" class="btn btn-default" data-dismiss="modal">Verlassen</button></center>
              </div>
            </div>

          </div>
        </div>
      </div>

Alles anzeigen

das habe ich 4x untereinander im Code.

Jtz frage ich hier mal ob jmd weiß wie ich die Abstände zwischen den Modals verringern kann. So das die Modals trotzdem Mittig zentriert sind.

Hoffe mir kann jmd helfen

Gruß!

CuzImCloud · 23. März 2018

Hat keiner eine Idee?

...

basti1012 · 23. März 2018

mit bootstramp kenne ich mich nicht aus. Verschieb es doch mit CSS

CuzImCloud · 24. März 2018

basti1012

Ich nutze Bootstrap Grid System.

Da mich Media Queries echt zu hart nerven.

djheke · 24. März 2018

Zitat von CuzImCloud

basti1012

Ich nutze Bootstrap Grid System.

Da mich Media Queries echt zu hart nerven.

LOL

tobbyR5 · 31. März 2018

Die einzelnen col's werden entweder von eine "row" umfasst oder einem Container. Beide habe eine minimale und maximale Breite je nach Endgerät.

Die einzelnen col's werden darin automatisch an die Breite angepasst. Wenn bspw. der Container 2000 px breit ist werden die 4 col"s automatisch 500 px bereit, ist der Container nur 1000 px breit werden die 4 col"s entsp. 250 px breit.

Wenn man im css den cols ein "border:1px solid black;" verpasst, sieht man die Außenkanten der cols.

basti1012 · 31. März 2018

was meinst du mit ausenkanten des cols.

Weiß nicht wie bootstramp das so macht.

Nur es ist mir auch schon mal passiert das ich border, margin und padding nicht bedacht hatte und dann was über wahr oder nicht mehr passte.

Ich hätte dan 4*col * 2 Border = 8 * 1px (Border-breite) + 2000px = Container muß 2008 Pixel groß sein.

Nur wie gesagt das kam bei dir schon mal öffters vor bei bestimmten Layout sachen vor,aber wie Bootsramp mit sein Layout Tickt weiß ich nicht

tobbyR5 · 31. März 2018

Mit Außenkante meinte ich den Rand der Spalten, nur damit man sieht, wie breit dei Spalten laufen.

Bei dem Layout oben, worum es geht, sind vermutlich die 4 Spalten deutlich breiter als die 4 button. Daher ergibt sich der große Abstand zwischen den button. Da die Spalten aber responsiv sind, verändern sich die Breiten ja je nach der Breite des Browser Fensters.

Eine Alternative, wenn man die buttons immer auf der jeweilgen Spaltenbreite haben möchte, ist die css Eigenschaft btn-block in bootstrap.

Bootstrap col-md-3

Jetzt mitmachen!

Teilen