Bootstrap Gitter ändern Spalten auf Größe ändern

Ich versuche, eine Möglichkeit zur Größenanpassung Gitter Spalten zu finden. Es ist ahrd zu erklären, also habe ich ein Bild von dem gemacht, was ich erreichen möchte grundlegend, wenn ich das Browserfenster verändere, ändert sich Gitter, so dass das letzte Element in der Spalte in neue Reihe verschoben wird. Kann dies mit Bootstrap oder einer anderen Technologie gemacht werden?Bootstrap Gitter ändern Spalten auf Größe ändern

Ein Bild sagt mehr als tausend Worte

Quelle

2017-01-19 Energizem

Es wird erwartet, zu erforschen, dass Sie zumindest versuchen, diese für sich selbst zu codieren. Stack Overflow ist kein Code-Schreibdienst. Ich würde vorschlagen, dass Sie einige [** zusätzliche Forschung **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-sected-of-stack-overflow-users) tun entweder über Google oder durch die Suche nach SO, versuchen und. Wenn Sie immer noch Probleme haben, kommen Sie zurück mit ** Ihrem Code ** und erklären Sie, was Sie versucht haben. –

Ich wusste nicht, was ich nach tbh suchen sollte, meine beste Vermutung war Bootstrap, aber alle Bootstrap-Beispiele, die ich gesehen habe, konnten das nicht tun ... – Energizem

Bootstrap in Klassen gebaut haben Sie es mit ihnen zu tun. Für das obige Bild haben Sie versucht, den folgenden Code zu testen und vergessen Sie nicht, Bootstrap css einzuschließen. was Sie von getBootstrap Website bekommen können. Ich nehme an, es gibt 6 Boxen in einer Reihe. Du kannst das sogar mit Hilfe von @media query in css bearbeiten. versuchen @media Abfrageverhalten auf unterschiedlichen Bildschirmbreiten und verschiedene Arten von Geräten wie iPad Tabletten und Telefon usw.

  <html lang="en"> 
     <head> 
      <title>Bootstrap Example</title> 
      <meta charset="utf-8"> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     </head> 
     <body> 
     <div class="row"><!-- row is a built in class of bootstrap and each row has 12 column --> 
       <!-- give each column a width of 2 columns --> 
       <!-- col-lg-* is for large screens but include all type of classes for all type of screens--> 
       <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;> 
         Box 1 
       </div> 
       <!-- col-md-* is for medium size screens but include all type of classes for all type of screens--> 
       <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;"> 
         Box 2 
       </div> 
       <!-- col-sm-* is for small screens but include all type of classes for all type of screens--> 
       <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;"> 
         Box 3 
       </div> 
       <!-- col-xs-* is for extra small screens but include all type of classes for all type of screens--> 
       <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;"> 
         Box 4 
       </div> 
       <!-- col-xl-* is for extra large screens but include all type of classes for all type of screens--> 
       <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;"> 
         Box 5 
       </div> 

       <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;"> 
         Box 6 
       </div> 
     </div> 
     </body> 
     </html>

Quelle

2017-01-19 17:26:30

Thx für die Eingabe, Ziel ist es, Box 6 haben, um die Reihe als u-Maßstab Browser, Breite der Felder bleibt die gleiche – Energizem

nur hinzufügen min-Breite: 200px; im Stil Attribut jeder Spalte Div und Sie werden die gewünschte –

Ich bearbeite die Antwort und Sie können dort das wahre Bild sehen –

wert Wenn ich etwas in Ihrer Frage bin fehlt, das ist genau das, was Bootstrap für ist. Sie könnten Ihre eigene Lösung finden, aber es ist so einfach, mit Bootstrap zu beginnen.

http://getbootstrap.com/

Andere reaktions Frameworks existieren, aber ich empfehle Bootstrap

Quelle

2017-01-19 16:49:28

Was ist mit den Downvotes? Habe ich mich geirrt oder hätte ich eine so grundlegende Frage nicht beantworten sollen? Ich habe als Mitglied für 4+ Jahre profitiert, gerade erst angefangen zu versuchen, mit einigen Antworten zurückzugeben. –

Ich bin mir nicht sicher über Downvotes, aber thx für die Eingabe. Und ja, ich habe versucht Bootstrap, aber konnte das nicht funktionieren. Ich denke, ich brauche noch eine Menge über Bootstrap zu lernen – Energizem

Sie könnten versuchen, den obigen Code, der im Arbeitszustand ist –

Bootstrap Gitter ändern Spalten auf Größe ändern

Antwort

Verwandte Themen