Ответ 1
Решение состоит в том, чтобы поместить этот код css в ваш пользовательский файл css
.carousel-inner > .item > img {
margin: 0 auto;
}
Пожалуйста, взгляните на следующее изображение, мы используем карусель для загрузки изображений. Однако, когда ширина окна велика, изображение не выравнивается с границей правильно.
Но пример карусели, предоставленный бутстрапом, всегда отлично работает, независимо от ширины окна. Следуя коду.
Может кто-нибудь объяснить, почему карусель ведет себя по-другому? Это что-то связано с размером изображения или отсутствием какой-либо конфигурации bootstrap?
<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>
Решение состоит в том, чтобы поместить этот код css в ваш пользовательский файл css
.carousel-inner > .item > img {
margin: 0 auto;
}
С bootstrap 3 просто добавьте отзывчивые и центральные классы:
<img class="img-responsive center-block" src="img/....jpg" alt="First slide">
Это автоматически изменяет размер изображения и центрирует изображение.
Edit:
С bootstrap 4 просто добавьте класс img-fluid
<img class="img-fluid" src="img/....jpg">
Я столкнулся с той же проблемой и решил ее так:
Возможно вставить содержимое без изображения в карусель, чтобы мы могли его использовать.
Сначала нужно вставить div.inner-item
(где вы будете выравнивать центр), а затем вставить изображение внутри этого div.
Вот мой код (Ruby):
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<%= image_tag "couples/1.jpg" %>
</div>
<% (2..55).each do |t|%>
<div class="item">
<div class='inner-item'>
<%= image_tag "couples/#{t}.jpg" %>
</div>
</div>
<% end -%>
</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>
И мой css-код (.scss):
.inner-item {
text-align: center;
img {
margin: 0 auto;
}
}
В то время как vekozlov ответ будет работать в Bootstrap 3 для центрирования вашего изображения, он будет разорваться, когда карусель будет уменьшен: изображение сохраняет свой размер вместо масштабирования с помощью карусель.
Вместо этого сделайте это на каруселе верхнего уровня div
:
<div id="my-carousel" class="carousel slide"
style="max-width: 900px; margin: 0 auto">
...
</div>
Это центрирует всю карусель и предотвращает ее рост за пределы ваших изображений (т.е. 900 пикселей или все, что вы хотите установить). Однако, когда карусель уменьшается, изображения уменьшаются с ним.
Вы должны поместить эту информацию о стилизации в свой файл CSS/LESS, конечно.
Я думаю, что у меня есть решение:
На странице личного листа стиля присвойте ширине и высоте соответствие вашим размерам изображения.
Создайте дополнительный отдельный класс в этом верхнем div, который присваивает пространство пробелам... (показано ниже)
<div class="span6 columns" class="carousel">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
Не касаясь bootstrap.css, в вашей собственной таблице стилей, вызовите "карусель" (или любой другой ярлык, который вы выберете), чтобы соответствовать ширине и высоте исходного пикселя!
.carousel {
width: 320px;
height: 200px;
}
Итак, в моем случае, я использую небольшие изображения 320х200 для карусели. Вероятно, предустановленные размеры в bootstrap.css, но мне не нравится это менять, поэтому я могу попытаться оставаться в курсе будущих выпусков. Надеюсь, это поможет ~~
Это может иметь какое-то отношение к вашим стилям. В моем случае я использую ссылку в родительском элементе "item", поэтому мне пришлось изменить таблицу стилей, чтобы сказать следующее:
.carousel .item a > img {
display: block;
line-height: 1;
}
в соответствии с ранее существовавшим кодом форварда:
.carousel .item > img {
display: block;
line-height: 1;
}
и мое изображение выглядит следующим образом:
<div class="active item" id="2"><a href="http://epdining.com/eats.php?place=TestRestaurant1"><img src="rimages/2.jpg"></a><div class="carousel-caption"><p>This restaurant is featured blah blah blah blah blah.</p></div></div>
Имеются ли у ваших изображений ровно 460px ширина как span6? В моем случае, с разными размерами изображений, я помещаю атрибут высоты на свои изображения, чтобы быть уверенным, что они имеют одинаковую высоту, а карусель не изменяет размер между изображениями.
В вашем случае постарайтесь установить высоту, чтобы соотношение между этой высотой и шириной вашего внутреннего каруселя было таким же, как aspectRatio ваших изображений
Для карусели, я считаю, что все изображения должны быть одинаковой высоты и ширины.
Кроме того, когда вы ссылаетесь на страницу строительных лесов из бутстрапа, я уверен, что span16 = 940px. Имея это в виду, я думаю, мы можем предположить, что если у вас есть
<div class="row">
<div class="span4">
<!--left content div guessing around 235px in width -->
</div>
<div class="span8">
<!--right content div guessing around 470px in width -->
</div>
</div>
Итак, вы должны быть осторожны при установке пространства пробелов в строке, потому что, если ширина изображения велика, он отправит ваш div в следующую "строку", и это не весело: P
Решение @Art L. Richards не получилось. теперь в bootstrap.css, исходный код стал таким.
.carousel .item > img {
display: block;
line-height: 1;
}
@rnaka530-код сломал бы флюидную функцию бутстрапа.
У меня нет хорошего решения, но я это исправить. Я очень внимательно наблюдал пример бутстрап-карусели http://twitter.github.com/bootstrap/javascript.html#carousel.
Я узнаю, что ширина img должна быть больше ширины сетки. В span9
ширина составляет до 870 пикселей, поэтому вам нужно подготовить изображение размером более 870 пикселей. Если у вас больше контейнера вне img, так как все контейнеры имеют границу или маржу, вы можете использовать изображение с меньшей шириной.
Вставьте это в родительский div-класс css, где находится ваша карусель.
<div class="parent_div">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="assets/img/slider_1.png" alt="">
<div class="carousel-caption">
</div>
</div>
</div>
</div>
</div>
CSS
.parent_div {
margin: 0 auto;
min-width: [desired width];
max-width: [desired width];
}
Я столкнулся с той же проблемой с тобой. Основываясь на намеке @thuliha, следующие коды решили мои проблемы.
В файле html
измените следующий пример:
<img class="img-responsive center-block" src=".....png" alt="Third slide">
В carousel.css
, измените класс:
.carousel .item {
text-align: center;
height: 470px;
background-color: #777;
}
Попробуйте
.item img{
max-height: 300px;
margin: auto;
}