다음 이미지를보세요. 부트 스트랩 캐 러셀을 사용하여 이미지를 회전하고 있습니다. 그러나 창 너비가 크면 이미지가 테두리와 제대로 정렬되지 않습니다.
그러나 부트 스트랩에서 제공하는 캐 러셀 예제는 창 너비에 관계없이 항상 잘 작동합니다. 코드를 따르십시오.
누군가 캐 러셀이 다르게 작동하는 이유를 설명 할 수 있습니까? 이것이 이미지 크기와 관련이 있습니까? 아니면 일부 부트 스트랩 구성이 누락 되었습니까?
<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;
}답변
부트 스트랩 3에서는 반응 형 및 중앙 클래스를 추가하기 만하면됩니다.
<img class="img-responsive center-block" src="img/....jpg" alt="First slide">이렇게하면 이미지 크기가 자동으로 조정되고 사진이 중앙에 배치됩니다.
편집하다:
부트 스트랩 4에서는 img-fluid클래스를 추가하기 만하면 됩니다.
<img class="img-fluid" src="img/....jpg">답변
나는 같은 문제에 직면하여 다음과 같이 해결했다. 이미지가 아닌 콘텐츠를 Carousel에 삽입 할 수 있으므로 사용할 수 있습니다. 먼저 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 의 대답은 이미지를 중앙에 부트 스트랩 3에서 작동 회전 목마가 축소 될 때, 그것은 깰 것 : 이미지가 회전 목마 아래로 확장하는 대신 크기를 유지합니다.
대신 최상위 캐 러셀에서 div다음을 수행하세요 .
<div id="my-carousel" class="carousel slide"
style="max-width: 900px; margin: 0 auto">
...
</div>이렇게하면 전체 캐 러셀이 중앙에 배치되고 이미지 너비 (예 : 900 픽셀 또는 원하는대로 설정)를 초과하는 것을 방지 할 수 있습니다. 그러나 캐 러셀이 축소되면 이미지도 함께 축소됩니다.
물론이 스타일 정보를 CSS / LESS 파일에 넣어야합니다.
답변
Bootstrap 4에서는 태그 에 mx-auto클래스를 추가 할 수 있습니다 img.
예를 들어 이미지의 너비가 75 %이면 다음과 같이 표시됩니다.
<img class="d-block w-75 mx-auto" src="image.jpg" alt="First slide">Bootstrap은 다음으로 자동 번역 mx-auto됩니다.
ml-auto, .mx-auto {
margin-left: auto !important;
}
.mr-auto, .mx-auto {
margin-right: auto !important;
}답변
그것은 당신의 스타일과 관련이있을 수 있습니다. 제 경우에는 상위 “item”div 내에서 링크를 사용하고 있으므로 다음과 같이 스타일 시트를 변경해야했습니다.
.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>답변
해결책이 있다고 생각합니다.
개인 스타일 시트 페이지에서 이미지 크기 와 일치하도록 너비와 높이를 지정하십시오 .
스팬이있는 공간에 적합한 최상위 div에 별도의 추가 “클래스”를 만듭니다 (아래 참조).
<div class="span6 columns" class="carousel">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">자신의 스타일 시트에서 bootstrap.css를 건드리지 않고 “carousel”(또는 선택한 레이블)을 호출하여 원본 픽스의 너비와 높이를 일치 시키십시오!
.carousel {
width: 320px;
height: 200px;}
그래서 제 경우에는 작은 320×200 이미지를 캐 러셀에 사용하고 있습니다. bootstrap.css에 미리 설정된 크기가있을 수 있지만, 향후 릴리스에서 최신 상태를 유지하려고 할 수 있도록 변경하는 것을 좋아하지 않습니다. 이게 도움이 되길 바라 ~~
