Web-Frontend
Bootstrap-Tutorial
Eine kurze Diskussion darüber, wie Spalten im Bootstrap-Rasterlayout umbrochen werden
Eine kurze Diskussion darüber, wie Spalten im Bootstrap-Rasterlayout umbrochen werden
In diesem Artikel erfahren Sie mehr über das Problem des Zeilenumbruchs im Bootstrap-Grid-Layout und erfahren, wie die Grid-Spalten umbrochen werden. Ich hoffe, dass er für alle hilfreich ist!
Bootstrap-Tutorial“]
Häufig gestellte Fragen zu Rasterlinienumbrüchen:- Keine Zeilenumbrüche, an denen Linien unterbrochen werden sollten
- Zeilenumbrüche, an denen Linien nicht unterbrochen werden sollten
- Zuletzt Zeilensatz von automatischen Zeilenumbrüchen Verwirrung
.row-cols-* Die zuvor verwendete zeile ist eine einfache < ;div class="row">, tatsächlich können Sie für Zeile außerdem die Klasse row-cols-* verwenden, um schnell die Anzahl der möglichen Spalten festzulegen bester aktueller Inhalt und Layout. Die normalen .col-*-Klassen gelten für einzelne Spalten (z. B. .col-md-4), während die row-cols-*-Klassen als Verknüpfungen im übergeordneten Element verwendet werden .row gesetzt auf.
.row-cols-*用法
我们前面使用的row都是一个单纯的<div class="row">，事实上，对于row也可以进一步的使用<code>row-cols-*类快速设置最能呈现内容和布局的列数。普通的.col-*类应用于各个列（例如.col-md-4），而row-cols-*类是作为快捷方式在父.row上设置的。
.row-cols-*的星号可以写数字，数字代表一行要显示的列数，而不是宽度，这一点不要和普通的.col-*相混淆。另外还可以使用.row-cols-auto自适应宽度，不过这样一来，布局很可能会脱离你的控制。
下面还是用代码来演示以下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>网格行列演示</title>
</head>
<body>
<div>
<div class="row row-cols-3">
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>显示结果如下
试着把row-cols-3中的3改为2、4、5、6等查看效果。 有没有发现还有个小惊喜，通过设置列的宽度col-我们没法平均一行显示5列，但是通过设置row-cols-5就可以实现了。
2.2 .row-cols-*-*Das Sternchen von .row-cols-* kann mit Zahlen geschrieben werden. Die Zahlen geben die Anzahl der in einer Zeile anzuzeigenden Spalten an, nicht die Breite. Dies sollte nicht mit dem Gewöhnlichen verwechselt werden .col-*</ code> ist verwirrt. Sie können die Breite auch mit .row-cols-auto anpassen, aber in diesem Fall liegt das Layout wahrscheinlich außerhalb Ihrer Kontrolle. </h2><p>Der Code wird weiterhin verwendet, um Folgendes zu demonstrieren: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>网格行列演示</title>
</head>
<body>
<div>
<div class="row row-cols-md-1 row-cols-md-2 row-cols-lg-3">
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html></pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>Die angezeigten Ergebnisse lauten wie folgt</p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/837/214/126/1637147100990379.gif" class="lazy" title=" 1637147091163077.png" alt="Eine kurze Diskussion darüber, wie Spalten im Bootstrap-Rasterlayout umbrochen werden"/><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/837/214/126/1637147100990379.gif" class="lazy" title="1637147100990379.gif" alt="Eine kurze Diskussion darüber, wie Spalten im Bootstrap-Rasterlayout umbrochen werden"/></p> Versuchen Sie, 3 in Zeile-Spalte-3 in 2, 4, 5, 6 usw. zu ändern, um den Effekt zu sehen.
Haben Sie festgestellt, dass es noch eine weitere kleine Überraschung gibt? Durch die Festlegung der Spaltenbreite „col-“ können wir im Durchschnitt nicht 5 Spalten in einer Zeile anzeigen, aber wir können dies erreichen, indem wir „row-cols-5“ festlegen. <h2 id="h-data-id-heading-code-row-cols-code-Verwendung"><h2 data-id="heading-3">2.2 <code>.row-cols-*-* Verwendung
Genau wie das Festlegen der Breite der Spalte unterstützt auch das Festlegen der Anzahl der Zeilen das responsive Design Der folgende Code zeigt seine spezifische Verwendung an. Beachten Sie, dass es keine Klasse wie row-cols-1 gibt, was bedeutet, dass sie die kleinste ist, wenn sie nicht standardmäßig geschrieben wird Bildschirm.
<div class="container"> <div class="row"> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <!-- 此处强制换行 --> <div class="w-100"></div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> </div> </div>
Responsive-Effekt-Animation
2.3 Ultrabreiter Zeilenumbruch
Wenn für jede Zelle in einer Zeile ein Breitenwert festgelegt ist und die verbleibende Breite in einer Zeile die nächste Zelle nicht aufnehmen kann, wird automatisch umgebrochen. Ich habe diesen Teil bereits ausführlich in „Abschnitt 4 Bootstrap-Webseiten-Layout-Rastersystem“ erklärt und demonstriert, daher werde ich hier nicht auf Details eingehen. Wenn Sie etwas nicht verstehen, lesen Sie bitte Abschnitt 4.2.4.
2.4 Erzwungener ZeilenumbruchIn Bootstrap erfolgt das Erzwingen des Zeilenumbruchs ohne Änderung der Breite jeder Spalte normalerweise durch Hinzufügen mehrerer Zeilen. In diesem Fall ist es jedoch erforderlich, den Zeilenumbruch nach einer bestimmten Spalte zu erzwingen können Sie einen kleinen Trick anwenden: Wenn schließlich ein Zeilenumbruch erforderlich ist, fügen Sie ein Div mit einer Breite von 100 % und einer Höhe von 0 hinzu, um erzwungene Zeilenumbrüche zu erreichen.
rrreee🎜 Ursprünglich in einer Zeile angezeigt, wird es in zwei Zeilen angezeigt. 🎜🎜🎜🎜🎜Weitere Informationen zu Bootstrap finden Sie unter: 🎜Bootstrap-Basis-Tutorial🎜! ! 🎜Das obige ist der detaillierte Inhalt vonEine kurze Diskussion darüber, wie Spalten im Bootstrap-Rasterlayout umbrochen werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
So erhalten Sie die Bootstrap -Suchleiste
Apr 07, 2025 pm 03:33 PM
So verwenden Sie Bootstrap, um den Wert der Suchleiste zu erhalten: Bestimmt die ID oder den Namen der Suchleiste. Verwenden Sie JavaScript, um DOM -Elemente zu erhalten. Holen Sie sich den Wert des Elements. Führen Sie die erforderlichen Maßnahmen aus.
So verwenden Sie Bootstrap in Vue
Apr 07, 2025 pm 11:33 PM
Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.
So schreiben Sie geteilte Zeilen auf Bootstrap
Apr 07, 2025 pm 03:12 PM
Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.
Wie man vertikale Zentrierung von Bootstrap macht
Apr 07, 2025 pm 03:21 PM
Verwenden Sie Bootstrap, um die vertikale Zentrierung zu implementieren: FlexBox-Methode: Verwenden Sie den D-Flex, den Justify-Content-Center und die Ausrichtungsklassen aus Align-Item-Center, um Elemente in den Flexbox-Behälter zu platzieren. Methode für Ausstellungs-Iitem-Center-Klassen: Bei Browsern, die Flexbox nicht unterstützen, verwenden Sie die Klasse aus Align-items-Center-Klasse, vorausgesetzt, das übergeordnete Element hat eine definierte Höhe.
So fügen Sie Bilder auf Bootstrap ein
Apr 07, 2025 pm 03:30 PM
Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.
So richten Sie das Framework für Bootstrap ein
Apr 07, 2025 pm 03:27 PM
Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.
So ändern Sie Bootstrap
Apr 07, 2025 pm 03:18 PM
Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.
So verwenden Sie die Bootstrap -Taste
Apr 07, 2025 pm 03:09 PM
Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen
