wake-up-neo.com

Twitter Bootstrap 3 - gleich große Platten in einer fließenden Reihe

Ich bin neu in Bootstrap 3 und möchte auf meiner Zielseite drei gleich große Fenster haben, obwohl das mittlere Feld weniger Inhalt hat. Bei einer Größenänderung erhalten sie dieselbe Höhe, werden jedoch beim ersten Besuch der Seite nicht angezeigt. 

Ich habe bereits versucht, den Überlauf mit CSS zu verbergen, und es schneidet den unteren Rand des Panels ab.

Hier ist mein Code:

<div class="row-fluid">
  <!--begin panel 1 -->
  <div class="col-md-4">
    <div style="text-align:center" class="panel panel-primary">
      <div class="panel-heading">
        <h1 class="panel-title text-center">Web y Metrícas</h1>
      </div>
      <!-- end panel-heading -->
      <div class="panel-body">
        <p>
          <img style="margin: 0 auto;" class="img-responsive" src="web.png" height="30%" width="30%" alt="Web y Metrícas" />
        </p>
        <p class="text-left lead2">Apoyamos estratégicamente la presencia de tu empresa en el mundo digital, a través de la construcción de recursos web atractivos para tus clientes.</p>
        <ul class="text-left">
          <li>Web Corporativas</li>
          <li>Tiendas Virtuales</li>
          <li>Plataformas e-Learning</li>
          <li>Arquitectura de Información</li>
          <li>Google Analytics, SEO–SEM</li>
          <li>Análisis de Competencia Digital</li>
          <li>Data Mining</li>
        </ul> <a class="btn btn-primary" href="#">Ver más &raquo;</a>
      </div>
      <!-- end panel-body -->
    </div>
    <!-- end panel-primary -->
  </div>
  <!--end col-md-4 -->
  <!-- begin panel 2 -->
  <div class="col-md-4">
    <div style="text-align:center" class="panel panel-primary">
      <div class="panel-heading">
        <h1 class="panel-title">Gestíon de Redes Socials</h1>
      </div>
      <!-- end panel-heading -->
      <div class="panel-body">
        <p>
          <img style="margin: 0 auto;" class="img-responsive" src="redes.png" height="30%" width="30%" alt="Gestíon de Redes Socials" />
        </p>
        <p class="text-left lead2">Crear una experiencia de marca excepcional a través de redes es más inteligente, rápida y las comunicaciones sociales serán más eficientes.</p>
        <ul class="text-left">
          <li>Compromiso</li>
          <li>Publicación</li>
          <li>Monitoreo</li>
          <li>Analítica</li>
          <li>Colaboración</li>
          <li>CRM</li>
          <li>Movil</li>
        </ul> <a class="btn btn-primary" href="#">Ver más &raquo;</a>
      </div>
      <!-- end panel-body -->
    </div>
    <!-- end panel-primary -->
  </div>
  <!-- end col-md-4 -->
  <!--begin panel 3 -->
  <div class="col-md-4">
    <div style="text-align:center" class="panel panel-primary">
      <div class="panel-heading">
        <h1 class="panel-title">Plan de Medios</h1>
      </div>
      <!-- end panel-heading -->
      <div class="panel-body">
        <p>
          <img style="margin: 0 auto;" class="img-responsive" src="medios.png" height="30%" width="30%" alt="Plan de Medios" />
        </p>
        <p class="text-left lead2">Trabajamos en conjunto con la empresa para reforzar las fortalezas de su organización y las comunicamos de forma integral y con un mensaje claro.</p>
        <ul class="text-left">
          <li>Asesoría Comunicacional</li>
          <li>RR.PP</li>
          <li>Presencia de Marca</li>
          <li>Clipping Digital</li>
          <li>Manejo de Crisis</li>
          <li>Lobby</li>
          <li>Media Training</li>
        </ul> <a class="btn btn-primary" href="#">Ver más &raquo;</a>
      </div>
      <!-- end panel-body -->
    </div>
    <!-- end  panel-primary -->
  </div>
  <!-- end col-md-4 -->
</div>
<!-- end row -->
27
Milan Moffatt

Dies kann mit der CSS-Flexbox erfolgen. Es wird nur minimales CSS benötigt.

.equal {  
    display: -webkit-flex;
    display: flex;
}

Fügen Sie einfach .equal zu Ihrem .row hinzu und Flexbox erledigt den Rest.

http://www.codeply.com/go/BZA25rTY45

UPDATE: Bootstrap 4 verwendet Flexbox, so dass kein zusätzliches CSS erforderlich ist . http://www.codeply.com/go/0Aq0p6IcHs

58
Zim

Wenn Sie das Bootstrap-Grid verwenden, werden Sie meiner Meinung nach keinen einfachen Weg finden, um dies ohne Hacks wie das folgende CSS zu erreichen.

Das sagt im Grunde. Wenn die Bildschirmbreite größer als der md-Haltepunkt in bootstrap ist, geben Sie allen Elementen mit panel-body-Klasse, die direkte Nachkommen der Spaltenelemente sind, eine Mindesthöhe von 420px an, die zufällig eine "magische Zahl" ist, die mit Ihrem vorhandenen Inhalt funktioniert.

Ich denke auch, dass dies eine wirklich grobe Lösung ist, aber es "funktioniert" im Nu.

@media (min-width: 992px) {
  .col-md-4 > .panel > .panel-body {
    min-height: 420px;
  }
}

Hier ist ein CSS-Tricks-Artikel Fluid Width Equal Height Columns , der verschiedene Wege (display: table & flexbox) beschreibt, um dies zu erreichen. Möglicherweise müssen Sie jedoch für diese bestimmte Aufgabe vom responsiven Bootstrap-Grid ausweichen.

Hier ist auch das Complete Guide zu Flexbox

8
jessegavin

Lösung von Bootstrap - füge diese css hinzu und füge die Klasse deiner Zeile hinzu:

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

Wie unter http://getbootstrap.com.vn/examples/equal-height-columns/ beschrieben, gibt es einige Vorbehalte, aber es klingt, als wäre es gut genug für Ihren Fall.

Ich sah auch diese Antwort hier .

Update für dynamische Spaltenanzahl

Bootstrap schließt Spalten automatisch in neue Zeilen ein, wenn Sie mehr hinzufügen, als in eine Zeile passen können. Diese Flexbox-Methode unterbricht dies jedoch. Ich habe festgestellt, dass Sie Folgendes tun können, um die Flexbox zu wickeln:

-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-align-content: flex-end;
align-content: flex-end;

Dies ist erstaunlich, wenn Sie eine dynamische Anzahl von Spalten haben oder Spalten, deren Breite sich entsprechend der Bildschirmgröße ändert. So kannst du so etwas haben:

<div class="row row-eq-height">
    <div class="col-sm-6 col-md-4">Content...</div>
    <div class="col-sm-6 col-md-4">Content...</div>
    <div class="col-sm-6 col-md-4">Content...</div>
    <div class="col-sm-6 col-md-4">Content...</div>
    <div class="col-sm-6 col-md-4">Content...</div>
</div>

Und es ist alles so, wie es erwartet wird. Nur aufpassen - es funktioniert nur in neueren Browsern. Mehr Infos hier

7
Chris

Ich habe keine dieser CSS-Methoden gefunden, um in meinem Fall zu funktionieren. Ich verwende auch Bilder in meinen Panels. Stattdessen verwendete ich eine einfache JQuery-Funktion, um die Arbeit zu erledigen

        window.onload = function resizePanel(){
            var h = $("#panel-2").height();
            $("#panel-1").height(h); // add a line like this for each panel you want to resize
        }

Wo sich die IDs "Panel-1" und "Panel-2" im Panel-Tag befinden, wählen Sie das größte Panel aus, mit dem Sie h festlegen, und rufen Sie die Funktion am Ende Ihrer HTML-Datei auf.

<body onresize = "resizePanel()">

Ich mache es auch so, dass die Funktion aufgerufen wird, wenn die Fenstergröße geändert wird, indem das Attribut onresize zum Hauptteil hinzugefügt wird

2
Stuart Clark

diese Funktion ermittelt die größte Paneelkörperhöhe und bestimmt dann die Höhe aller meiner Paneelkörperelemente.

function evenpanels() {
    var heights = [];                           // make an array
    $(".panel-body").each(function(){           // copy the height of each
        heights.Push($(this).height());         //   element to the array
    });
    heights.sort(function(a, b){return b - a}); // sort the array high to low
    var minh = heights[0];                      // take the highest number    
    $(".panel-body").height(minh);              // and apply that to each element
}

Da nun alle Panel-Bodys gleich sind, müssen die Höhen gelöscht werden, wenn die Fenstergröße geändert wird, bevor die Funktion "Evenpanels" erneut ausgeführt wird.

$(window).resize(function () { 
        $(".panel-body").each(function(){
            $(this).css('height',"");           // clear height values
        });                                     
        evenpanels();
});
1
Mike Ursitti

Ich füge obere und untere Polsterungen für den unteren <div> hinzu.

<div class="xxx" style="padding: 8px 0px 8px 0px">
    ...
</div>

Denn jeder Fall ist anders und Sie müssen sich je nach Situation anpassen.

Das Chrome-Entwicklerwerkzeug kann in solchen Situationen sehr nützlich sein.

 enter image description here

0
WesternGun