Взгляните на следующее изображение, мы используем загрузочную карусель для поворота изображений. Однако при большой ширине окна изображение не выравнивается по границе должным образом.
Но пример карусели, предоставляемый бутстрапом, всегда работает нормально, независимо от ширины окна. Следуя коду.
Может кто-нибудь объяснить, почему карусель ведет себя по-другому? Это как-то связано с размером изображения или отсутствует какая-то конфигурация начальной загрузки?
<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
контейнера?Ответы:
Решение состоит в том, чтобы поместить этот код CSS в свой собственный файл CSS:
источник
height:none
к.carousel-inner > .item > img
дает лучшие результаты, чем значение по умолчаниюheight:500px
.carousel-inner > .carousel-item > img { margin: 0 auto; }
для Bootstrap 4.В bootstrap 3 просто добавьте классы responseive и center:
Это автоматически изменяет размер изображения и центрирует изображение.
Редактировать:
С bootstrap 4 просто добавьте
img-fluid
классисточник
text-center
к<div class="carousel-item">
начальному тегуЯ столкнулся с той же проблемой и решил ее следующим образом: в карусель можно вставлять контент, не являющийся изображением, чтобы мы могли его использовать. Сначала вы должны вставить
div.inner-item
(где вы будете выравнивать центр), а затем вставьте изображение в этот div.Вот мой код (Ruby):
И мой css-код (.scss):
источник
Пока векозлов ответ будет работать в Bootstrap 3 для вашего изображения, он сломается при уменьшении масштаба карусели: изображение сохраняет свой размер, а не уменьшается с помощью карусели.
Вместо этого сделайте это на карусели верхнего уровня
div
:Это центрирует всю карусель и предотвращает ее выход за пределы ширины ваших изображений (например, 900 пикселей или что вы хотите установить). Однако, когда карусель уменьшается, изображения уменьшаются вместе с ней.
Вы, конечно, должны поместить эту информацию о стилях в свой файл CSS / LESS.
источник
В Bootstrap 4 вы можете добавить
mx-auto
класс в свойimg
тег.Например, если ваше изображение имеет ширину 75%, оно должно выглядеть так:
Bootstrap автоматически переведет
mx-auto
на:источник
Это могло иметь какое-то отношение к вашим стилям. В моем случае я использую ссылку в родительском div "item", поэтому мне пришлось изменить свою таблицу стилей, чтобы сказать следующее:
под уже существующим кодом ускорения:
и мое изображение выглядит так:
источник
Думаю, у меня есть решение:
На странице персональной таблицы стилей задайте ширину и высоту в соответствии с размерами изображения.
Создайте дополнительный отдельный «класс» в этом верхнем div, который присвоит пространство с промежутками ... (показано ниже)
Не касаясь bootstrap.css, в вашей собственной таблице стилей вызовите "карусель" (или любой другой ярлык, который вы выберете), чтобы соответствовать ширине и высоте вашего исходного пикселя!
}
Так что в моем случае я использую маленькие изображения 320x200 для карусели. Вероятно, в bootstrap.css есть предустановленные размеры, но мне не нравится их менять, поэтому я могу постараться быть в курсе будущих выпусков. Надеюсь, это поможет ~~
источник
У меня с тобой такая же проблема. Основываясь на подсказке @thuliha, следующие коды решили мои проблемы.
Измените
html
файл, как показано в следующем примере:В
carousel.css
, измените класс:источник
Попробуй это
источник
У ваших изображений ширина точно 460 пикселей, как у span6? В моем случае с разными размерами изображений я добавляю атрибут высоты к своим изображениям, чтобы убедиться, что все они имеют одинаковую высоту, а размер карусели не изменяется между изображениями.
В вашем случае попробуйте установить высоту так, чтобы соотношение между этой высотой и шириной вашего внутреннего div карусели было таким же, как соотношение сторон ваших изображений.
источник
Решение @Art L. Richards не сработало. теперь в bootstrap.css исходный код стал таким.
Код @ rnaka530 нарушил бы плавную функцию начальной загрузки.
У меня нет хорошего решения, но я исправил. Я очень внимательно наблюдал за примером карусели начальной загрузки http://twitter.github.com/bootstrap/javascript.html#carousel .
Я обнаружил, что ширина img должна быть больше ширины сетки. В
span9
ширину до 870 пикселей, поэтому вам нужно подготовить изображение размером более 870 пикселей. Если у вас больше контейнера за пределами img, так как у всего контейнера есть граница или что-то поле, вы можете использовать изображение с меньшей шириной.источник
Я считаю, что для карусели все изображения должны быть одинаковой высоты и ширины.
Кроме того, когда вы возвращаетесь к странице строительных лесов из начальной загрузки, я почти уверен, что span16 = 940px. Имея это в виду, я думаю, мы можем предположить, что если у вас есть
Итак, да, вы должны быть осторожны при установке пространства промежутков в строке, потому что, если ширина изображения слишком велика, он отправит ваш div в следующую «строку», и это не весело: P
Ссылка 1
источник
Вставьте это в родительский класс div css, где находится ваша карусель.
CSS
источник