Bootstrap Carousel 이미지가 제대로 정렬되지 않음

다음 이미지를보세요. 부트 스트랩 캐 러셀을 사용하여 이미지를 회전하고 있습니다. 그러나 창 너비가 크면 이미지가 테두리와 제대로 정렬되지 않습니다.

그러나 부트 스트랩에서 제공하는 캐 러셀 예제는 창 너비에 관계없이 항상 잘 작동합니다. 코드를 따르십시오.

누군가 캐 러셀이 다르게 작동하는 이유를 설명 할 수 있습니까? 이것이 이미지 크기와 관련이 있습니까? 아니면 일부 부트 스트랩 구성이 누락 되었습니까?

<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">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</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">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</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;

}

그래서 제 경우에는 작은 320x200 이미지를 캐 러셀에 사용하고 있습니다. bootstrap.css에 미리 설정된 크기가있을 수 있지만, 향후 릴리스에서 최신 상태를 유지하려고 할 수 있도록 변경하는 것을 좋아하지 않습니다. 이게 도움이 되길 바라 ~~

나는 당신과 같은 문제에 직면하고 있습니다. @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;
    }

이미지의 너비가 span6과 정확히 460px입니까? 제 경우에는 이미지 크기가 다른 경우 이미지에 높이 속성을 지정하여 이미지가 모두 같은 높이이고 회전식 메뉴가 이미지 사이의 크기를 조정하지 않도록합니다.

귀하의 경우이 높이와 캐 러셀 내부 div의 너비 사이의 비율이 이미지의 aspectRatio와 같도록 높이를 설정하십시오.

@Art L. Richards의 솔루션이 작동하지 않았습니다. 이제 bootstrap.css에서 원본 코드는 이렇게되었습니다.

.carousel .item > img {
  display: block;
  line-height: 1;
}

@ rnaka530의 코드는 부트 스트랩의 유동적 기능을 손상시킬 것입니다.

나는 좋은 해결책이 없지만 그것을 고쳤습니다. 나는 부트 스트랩의 캐 러셀 예제를 매우주의 깊게 관찰했다 . http://twitter.github.com/bootstrap/javascript.html#carousel .

img 너비가 그리드 너비보다 커야한다는 것을 알았습니다. 에서 span9당신이 870px보다 이미지가 더 준비해야하므로, 최대 870px에있다 폭. 모든 컨테이너에 테두리 또는 여백이 있으므로 img 외부에 컨테이너가 더 많은 경우 너비가 더 작은 이미지를 사용할 수 있습니다.

캐 러셀의 경우 모든 이미지의 높이와 너비가 정확히 같아야한다고 생각합니다.

또한 부트 스트랩에서 스캐 폴딩 페이지를 다시 참조하면 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를 다음 "행"으로 보내므로 재미가 없습니다.

링크 1

캐 러셀이있는 CSS 상위 div 클래스에 이것을 삽입합니다.

<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];
}