jquery

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

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

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

<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>

답변

.carousel-inner > .item > img {
  margin: 0 auto;
}

 <img class="img-responsive center-block" src="img/....jpg" alt="First slide">

<img class="img-fluid" src="img/....jpg">

<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>

.inner-item {
    text-align: center;
    img {
        margin: 0 auto;
    }
}

<div id="my-carousel" class="carousel slide"
    style="max-width: 900px; margin: 0 auto">
    ...
</div>

<img class="d-block w-75 mx-auto" src="image.jpg" alt="First slide">

ml-auto, .mx-auto {
    margin-left: auto !important;
}

.mr-auto, .mx-auto {
    margin-right: auto !important;
}

.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 class="span6 columns" class="carousel">
            <div id="myCarousel" class="carousel slide">
                <div class="carousel-inner">
                <div class="item active">

.carousel       {
            width: 320px;
            height: 200px;