Drei gleiche Spalten in Bootstrap mit zentriertem Text funktioniert nicht

Ich habe drei Spalten im Bootstrap mit sowohl horizontal als auch vertikal ausgerichteten Text. Das Problem ist, dass die Spalten nicht in der Breite gleich sind, die dritte Spalte ist breiter als jede der anderen zwei. Die Spalten haben unterschiedliche Breiteninhalte, aber jeder würde in ein Drittel der Gesamtbreite passen. HierDrei gleiche Spalten in Bootstrap mit zentriertem Text funktioniert nicht

ist die HTML:

<div class="container-fluid"> 
    <footer class="footer navbar-fixed-bottom footer-bar"> 
     <div class="row display-tbl"> 
      <div class="col-xs-4 display-cell"><b>Opt1</b></div> 
      <div class="col-xs-4 display-cell"><img src="img.jpg" height="40" width="64"></div> 
      <div class="col-xs-4 display-cell"><b>Option 2</b></div> 
     </div> 
    </footer> 
</div>

Hier ist die CSS:

.footer-bar { 
    color: #FFFFFF; 
    background-color: #606060; 
} 
.display-tbl { 
    display: table; 
    table-layout: fixed; /* <- makes no difference */ 
    width: 100%; 
} 
.display-cell { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    float: none; 
}

Quelle

2016-03-21 tyebillion

alle Spalten gleich breit sind, mit Ausnahme der zweiten Spalte sieht kleiner aus, weil Ihre Bild hat feste Breite und Höhe. versuche rand hinzuzufügen: 1px fest rot; zu Ihrer .display-cell-Klasse und sehen, dass alle drei Spalten von gleicher Größe sind – koolhuman

Es hat nichts mit dem Bild zu tun! – tyebillion

okay, ich habe Ihren Code kopiert und eine Geige erstellt und alle Spalten sehen gleich breit aus. https://jsfiddle.net/ng2tgo3o/ gerade hinzugefügt "border: 1px solid red;" style – koolhuman

Das Problem könnte sein, dass Sie mit fester Breite zu Ihrem Bild hinzugefügt haben, versuchen Sie dies:

.display-cell img{ 
    width: 100%; 
    height: 100%; 
}

oder verwenden Sie die bootstrap reaktionsfähige Klasse für Bilder:

.img-responsive

„Lässt ein Bild anspricht (wird schön auf das übergeordnete Element maßstäblich)“

prüfen Arbeitsbeispiel:

http://www.bootply.com/wDTiwG9V49

Quelle

2016-03-21 20:25:58

auch wenn wir die obigen css nicht addieren, sind die divs gleich groß. es ist nur optisch zweite Spalte sieht kleiner aus. – koolhuman

Nein, das Ändern der Zellenbreite ruiniert das Bootstrap-Grid-Layout. Ich habe Text anstelle eines Bildes in die zweite Spalte eingefügt und die Spalten waren immer noch nicht gleich. – tyebillion

Ja, wenn Sie versuchen, dem Bild feste Breite hinzuzufügen, wird es die Reaktionsfähigkeit vermasseln, Platzieren von Text in den Spalten wird kein Problem sein http://www.bootply.com/KvBcWciYKT –

Drei gleiche Spalten in Bootstrap mit zentriertem Text funktioniert nicht

Antwort

Verwandte Themen