Equal Raum zwischen Bootstrap Säulenelementen

CSHTML:Equal Raum zwischen Bootstrap Säulenelementen

<div class="row"> 
    <div class="col-lg-4 box"> 
     <h2>Test1</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
     <p><input type="button" class="btn btn-default" value="Create &raquo" onclick="location.href='@Url.Action("Create", "Test1", new { area = ""})'" /></p> 
    </div><!-- /.col-lg-4 --> 
    <div class="col-lg-4 box"> 
     <h2>Test2</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
     <p><input type="button" class="btn btn-default" value="Create &raquo" onclick="location.href='@Url.Action("Create", "Test2", new { area = ""})'" /></p> 
    </div><!-- /.col-lg-4 --> 
    <div class="col-lg-4 box"> 
     <h2>Test3</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
     <p><input type="button" class="btn btn-default" value="Create &raquo" onclick="location.href='@Url.Action("Create", "Test3", new { area = ""})'" /></p> 
    </div><!-- /.col-lg-4 --> 
</div><!-- /.row -->

CSS:

.box{ 
    border: 2px solid black; 
}

Bootply

Wie erstelle ich gleich Raum zwischen diesen drei div ‚s und halten zentriert? Dies geht unter meine carousel.

Jede Hilfe ist willkommen

Quelle

2016-05-11 GTown-Coder

Was meinst du mit gleichem Abstand? Wie in, möchten Sie Whitespace auf jeder Seite Ihrer Spalten hinzufügen? Ist dies an den äußeren Kanten oder nur zwischen den Spalten? – Serlite

@Serlite nur zwischen den Spalten. aber ich merke, dass dies nicht möglich ist aufgrund der Tatsache, dass die 3 Bootstrap-Spalten bis zu 12 ('col-lg-4') und Bootstrap nur bis zu 12 Spalten pro Zeile –

I .row eine Flex-Box auf dem übergeordneten verwenden würde.

.box{ 
 
    border: 2px solid black; 
 
    flex:1; 
 
} 
 
.box:nth-of-type(2) { 
 
    margin:0px 10px 0px 10px; 
 
} 
 

 
.row{ 
 
    display:flex; 
 
    width:100%; 
 
}

<div class="row"> 
 
    <div class="box"> 
 
    <h2>Test1</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p><input type="button" class="btn btn-default" value="Create »" onclick="location.href='@Url.Action(" create",="" "test1",="" new="" {="" area="" })'"=""></p> 
 
    </div><!-- /.col-lg-4 --> 
 
    <div class="box"> 
 
    <h2>Test2</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p><input type="button" class="btn btn-default" value="Create »" onclick="location.href='@Url.Action(" create",="" "test2",="" new="" {="" area="" })'"=""></p> 
 
    </div><!-- /.col-lg-4 --> 
 
    <div class="box"> 
 
    <h2>Test3</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    <p><input type="button" class="btn btn-default" value="Create »" onclick="location.href='@Url.Action(" create",="" "test3",="" new="" {="" area="" })'"=""></p> 
 
    </div><!-- /.col-lg-4 --> 
 
</div><!-- /.row -->

Quelle

2016-05-11 19:23:34 Wowsk

funktioniert, die funktioniert! Danke! –

Großartig! Ich habe den Snippet-Code auch ein wenig aufgeräumt. – Wowsk

nur von Gerüstklassen Bootstrap verwenden, ist dies nicht zu kompliziert zu machen - man muss nur verschachtelte Spalten gestartet verwenden und zu aufeinanderfolgenden Spalten versetzt Klassen Anwendung. Zum Beispiel:

.box { 
 
    border: 2px solid black; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="col-lg-4"> 
 
    <div class="row"> 
 
     <div class="col-lg-10 box"> 
 
     <h2>Test1</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
     <p> 
 
      <input type="button" class="btn btn-default" value="Create »" onclick="location.href='@Url.Action(" create ",=" " "test1 ",=" " new=" " {=" " area=" " })'"=""> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-lg-4"> 
 
    <div class="row"> 
 
     <div class="col-lg-10 col-lg-offset-1 box"> 
 
     <h2>Test2</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
     <p> 
 
      <input type="button" class="btn btn-default" value="Create »" onclick="location.href='@Url.Action(" create ",=" " "test1 ",=" " new=" " {=" " area=" " })'"=""> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-lg-4"> 
 
    <div class="row"> 
 
     <div class="col-lg-10 col-lg-offset-2 box"> 
 
     <h2>Test3</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
     <p> 
 
      <input type="button" class="btn btn-default" value="Create »" onclick="location.href='@Url.Action(" create ",=" " "test1 ",=" " new=" " {=" " area=" " })'"=""> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

hoffe, das hilft! Lass es mich wissen, wenn du irgendwelche Fragen hast.

(Beachten Sie, dass Sie das Snippet auf Vollbild zu erweitern, um zu sehen daran zu arbeiten, da sonst wird es die mobile Abfrage Medien.)

Quelle

2016-05-11 19:27:35 Serlite

ahh danke für die Hilfe! +1 –

Ich bin froh, dass ich Ihnen helfen konnte, egal welche Lösung Sie am Ende haben! – Serlite

Equal Raum zwischen Bootstrap Säulenelementen

Antwort

Verwandte Themen