WordPress - Abrufen meiner Spalten zur automatischen Größenänderung mit Bootstrap

Ich habe eine Wordpress-Vorlage, die Bootstrap 2.3.1 verwendet. Ich habe derzeit meine beiden Bereiche über ein SPAN4 und SPAN8 eingerichtet. Die Auflösung ist bei 1170px gesperrt, daher muss die lg Komponente von Bootstrap nicht konfiguriert werden.WordPress - Abrufen meiner Spalten zur automatischen Größenänderung mit Bootstrap

Ich möchte etwas Hilfe mit den Bereichen in rot, wie zur Konfiguration meiner geschachtelten Spalten, damit sie richtig funktionieren. Sie befinden sich in einem Bereich, der bereits als Bereich 8 definiert ist. Es handelt sich also um ein Raster mit 8 Breiten, der so konfiguriert werden muss, dass 3 Spalten auf mittelgroßen Geräten, 2 Spalten auf kleinen Geräten und 1 Spalte auf den extra kleinen Geräten angezeigt werden.

Ich bin relativ neu in CSS, aber ich habe ein wenig Verständnis für grundlegende Codierung, es ist gerade mein Kopf im Moment. Das beigefügte Bild zeigen, was ich bin nach My Wordpress layout

kann ich nicht scheinen, jede Bootstrap zu bekommen mit den Größen arbeiten Ich mag würde angezeigt werden soll.

Quelle

2016-09-23 Brett Canfield

Ich schlage vor, Sie Bootstrap verwenden Version 3

http://getbootstrap.com/css/#grid-responsive-resets

im Gegensatz zu Version 2, hat es Klassen wie col-lg-*col-md-*col-sm-*col-xs-*, die Ihre Arbeit leichter erledigen.

versuchen, Ihr Problem zu verstehen.

versuchen, die unter Demo-Code, um zu sehen, ob es das Layout, das Sie

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.css"> 
<style> 
    .b { 
    border: 1px solid #333; 
    } 
</style> 
</head> 
<body> 

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-4">aside</div> 
    <div class="col-xs-8"> 
     main 
     <div class="row"> 
     <div class="col-md-4 col-sm-6"> 
      <div class="b"> 
      <h3>.col-md-4.col-sm-6</h3> 
      </div> 
     </div> 
     <div class="col-md-4 col-sm-6"> 
      <div class="b"> 
      <h3>.col-md-4.col-sm-6</h3> 
      </div> 
     </div> 
     <div class="col-md-4 col-sm-6"> 
      <div class="b"> 
      <h3>.col-md-4.col-sm-6</h3> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

</body> 
</html>

Quelle

2016-09-23 08:33:20 Littlee

wollen würde ich den ganzen Nachmittag verbrachte Zugabe, was ich nicht wusste bootstrap3 Klassen waren wie diese, und hatten sie alle für die Spalten auf die Größe automatisch nach Bildschirmgröße eingestellt, aber nicht realisiert, welche Version sie angewendet haben. Sie haben jetzt die Bootstrap 3-Funktionalität hinzugefügt und können nun die von Ihnen angegebenen Klassen verwenden. –

Ich habe Bootstrap 3 ausgeführt, aber die Spalten stapeln sich nicht so, wie ich es möchte. Momentan befindet sich jedes der Elemente in einem separaten div, nichts ist verschachtelt, und ich erhalte Spalte drei unter Spalte zwei, so dass es eine längere Liste wird. Ich möchte, dass sie die Liste gleichmäßig verteilen, da sie die Spalten stapelt, wenn die Bildschirmgröße kleiner wird. –

Ich habe meine Antwort bearbeitet, bitte überprüfen Sie sie. – Littlee

WordPress - Abrufen meiner Spalten zur automatischen Größenänderung mit Bootstrap

Antwort

Verwandte Themen