Bitte schauen Sie sich das folgende Bild an, wir verwenden ein Bootstrap-Karussell, um die Bilder zu drehen. Wenn die Fensterbreite jedoch groß ist, wird das Bild nicht richtig am Rand ausgerichtet.
Das von Bootstrap bereitgestellte Karussellbeispiel funktioniert jedoch immer einwandfrei, unabhängig von der Breite des Fensters. Dem Code folgen.
Kann jemand erklären, warum sich Karussell anders verhält? Hat dies etwas mit der Bildgröße zu tun oder fehlt eine Bootstrap-Konfiguration?
<section id="carousel">
<div class="hero-unit span6 columns">
<h2>Welcome to TACT !</h2>
<div id="myCarousel" class="carousel slide" >
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active" >
<img alt="" src="/eboxapps/img/3pp-1.png">
<div class="carousel-caption">
<h4>1. Need a 3rd party jar?</h4>
</div>
</div>
<div class="item">
<img alt="" src="/eboxapps/img/3pp-2.png">
<div class="carousel-caption">
<h4>2. Create Request</h4>
</div>
</div>
<div class="item">
<img alt="" src="/eboxapps/img/3pp-3.png">
<div class="carousel-caption">
<h4>3. What happens?</h4>
</div>
</div>
<div class="item">
<img alt="" src="/eboxapps/img/3pp-4.png">
<div class="carousel-caption">
<h4>4. Status is Emailed</h4>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
.span6
Container?Antworten:
Die Lösung besteht darin, diesen CSS-Code in Ihre benutzerdefinierte CSS-Datei einzufügen:
quelle
height:none
zu.carousel-inner > .item > img
besseren Ergebnissen als die Standardeinstellungheight:500px
.carousel-inner > .carousel-item > img { margin: 0 auto; }
für Bootstrap 4 tun.Fügen Sie mit Bootstrap 3 einfach die Responsive- und Center-Klassen hinzu:
Dadurch wird die Bildgröße automatisch geändert und das Bild zentriert.
Bearbeiten:
Fügen Sie mit Bootstrap 4 einfach die
img-fluid
Klasse hinzuquelle
text-center
zum<div class="carousel-item">
Start-Tag hinzufügenIch hatte das gleiche Problem und löste es folgendermaßen: Es ist möglich, Nicht-Bildinhalte in Carousel einzufügen, damit wir sie verwenden können. Sie sollten zuerst einfügen
div.inner-item
(wo Sie die Ausrichtung in der Mitte vornehmen) und dann ein Bild in dieses Div einfügen.Hier ist mein Code (Ruby):
Und mein CSS-Code (.scss):
quelle
Während die Antwort von vekozlov in Bootstrap 3 funktioniert, um Ihr Bild zu zentrieren , bricht sie, wenn das Karussell verkleinert wird: Das Bild behält seine Größe bei, anstatt es mit dem Karussell zu verkleinern.
Führen Sie dies stattdessen auf dem Karussell der obersten Ebene aus
div
:Dadurch wird das gesamte Karussell zentriert und verhindert, dass es über die Breite Ihrer Bilder hinauswächst (dh 900 Pixel oder was auch immer Sie einstellen möchten). Wenn das Karussell jedoch verkleinert wird, werden die Bilder damit verkleinert.
Sie sollten diese Styling-Informationen natürlich in Ihre CSS / LESS-Datei einfügen.
quelle
In Bootstrap 4 können Sie
mx-auto
Ihrer Klasse eine Klasse hinzufügenimg
Tag .Wenn Ihr Bild beispielsweise eine Breite von 75% hat, sollte es folgendermaßen aussehen:
Bootstrap übersetzt automatisch
mx-auto
in:quelle
Es könnte etwas mit Ihren Stilen zu tun haben. In meinem Fall verwende ich einen Link innerhalb des übergeordneten "item" -Divs, daher musste ich mein Stylesheet ändern, um Folgendes zu sagen:
unter dem bereits vorhandenen Boostrap-Code:
und mein Bild sieht aus wie:
quelle
Ich denke ich habe eine Lösung:
In Ihrem Blatt Seite persönlichen Stil, weisen Sie die Breite und Höhe passen Ihre Bildabmessungen.
Erstellen Sie eine zusätzliche separate "Klasse" in diesem oberen Bereich, die den Raum mit Spannweiten anpasst ... (siehe unten)
Rufen Sie in Ihrem eigenen Stylesheet "carousel" (oder ein beliebiges Etikett) auf, ohne die Datei bootstrap.css zu berühren, um die Breite und Höhe Ihrer Originalbilder anzupassen!
}}
In meinem Fall verwende ich kleine 320x200-Bilder zum Karussellieren. Es gibt wahrscheinlich voreingestellte Dimensionen in der bootstrap.css, aber ich mag es nicht, diese zu ändern, damit ich versuchen kann, mit zukünftigen Versionen auf dem neuesten Stand zu bleiben. Hoffe das hilft ~~
quelle
Ich habe das gleiche Problem mit Ihnen. Basierend auf dem Hinweis von @thuliha haben die folgenden Codes meine Probleme gelöst.
html
Ändern Sie in der Datei das folgende Beispiel:In der
carousel.css
, ändern Sie die Klasse:quelle
Versuche dies
quelle
Haben Ihre Bilder genau eine Breite von 460 Pixel wie span6? In meinem Fall habe ich bei unterschiedlichen Bildgrößen meinen Bildern ein Höhenattribut zugewiesen, um sicherzustellen, dass sie alle dieselbe Höhe haben und die Größe des Karussells zwischen den Bildern nicht geändert wird.
Versuchen Sie in Ihrem Fall, eine Höhe festzulegen, damit das Verhältnis zwischen dieser Höhe und der Breite Ihres Karussell-Innenbereichs dem Aspektverhältnis Ihrer Bilder entspricht
quelle
Die Lösung von @Art L. Richards hat nicht funktioniert. Jetzt in bootstrap.css ist der ursprüngliche Code so geworden.
Der Code von @ rnaka530 würde die flüssige Funktion von Bootstrap beeinträchtigen.
Ich habe keine gute Lösung, aber ich habe sie behoben. Ich habe das Karussellbeispiel des Bootstraps sehr genau beobachtet. Http://twitter.github.com/bootstrap/javascript.html#carousel .
Ich finde heraus, dass die Bildbreite größer sein muss als die Gitterbreite. In
span9
ist die Breite bis zu 870 Pixel groß, daher müssen Sie ein Bild vorbereiten, das größer als 870 Pixel ist. Wenn Sie mehr Container außerhalb des Bilds haben, da der gesamte Container einen Rand oder Rand hat, können Sie Bilder mit geringerer Breite verwenden.quelle
Für das Karussell glaube ich, dass alle Bilder genau die gleiche Höhe und Breite haben müssen.
Wenn Sie von Bootstrap auf die Gerüstseite zurückgreifen, bin ich mir ziemlich sicher, dass span16 = 940px ist. In diesem Sinne können wir davon ausgehen, dass Sie eine haben
Also ja, Sie müssen vorsichtig sein, wenn Sie den Bereich innerhalb einer Zeile festlegen, denn wenn die Bildbreite zu groß ist, wird Ihr Div in die nächste "Zeile" verschoben, und das macht keinen Spaß: P.
Link 1
quelle
Fügen Sie dies in die übergeordnete CSS-Div-Klasse ein, in der sich Ihr Karussell befindet.
CSS
quelle