मैं बूटस्ट्रैप में उत्तरदायी हिंडोला बनाने की कोशिश कर रहा हूं, लेकिन हिंडोला की तुलना में कम चौड़ाई वाली छवियां बाईं ओर बढ़ रही हैं।

यहाँ कोड है:

.tales {
  width: 100%;
}
.carousel-inner{
  width:100%;
  
  max-height: 400x !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <!-- indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- inner -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://placehold.it/1200x600/2c3e50/000" alt="">
      </div>
      <div class="item">
        <img src="http://placehold.it/600x1200/d35400/000" alt="">
      </div>
      <div class="item">
        <img src="http://placehold.it/600x600/c0392b/000" alt="">
      </div>
    </div>

    <!-- controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
    
  </div>

</div>

यह देखना बेहतर है कि स्निपेट का विस्तार कब होता है। जितना होना चाहिए उससे कहीं ज्यादा समय लग रहा है..

3
AESTHETICS 15 जुलाई 2017, 12:31

5 जवाब

सबसे बढ़िया उत्तर

display:inline-block को img में सेट करें और text-align:center को .item में सेट करें

नीचे स्निपेट जांचें-

.tales {
  width: 100%;
}
.carousel-inner{
  width:100%;
  
  max-height: 400x !important;
}
.item{
text-align:center;
}
.carousel-inner img{
display:inline-block  !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <!-- indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- inner -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://placehold.it/1200x600/2c3e50/000" alt="">
      </div>
      <div class="item">
        <img src="http://placehold.it/600x1200/d35400/000" alt="">
      </div>
      <div class="item">
        <img src="http://placehold.it/600x600/c0392b/000" alt="">
      </div>
    </div>

    <!-- controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
    
  </div>

</div>
6
Ayatullah Rahmani 15 जुलाई 2017, 12:39

आप मार्जिन दे सकते हैं: 0 ऑटो; आईएमजी टैग के लिए।

.carousel-inner>.item>a>img, .carousel-inner>.item>img {
    margin: 0 auto;
}
2
Jainam 15 जुलाई 2017, 12:36

ये कोशिश करें

.carousel-inner>.item.active, .carousel-inner>.item.next.left, .carousel-inner>.item.prev.right {
    text-align: -webkit-center;

}

अद्यतन स्निपेट

.tales {
  width: 100%;
}
.carousel-inner{
  width:100%;
  
  max-height: 400x !important;
}
.carousel-inner>.item.active, .carousel-inner>.item.next.left, .carousel-inner>.item.prev.right {
    text-align: -webkit-center;
    left: 0;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <!-- indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- inner -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://placehold.it/1200x600/2c3e50/000" alt="">
      </div>
      <div class="item">
        <img src="http://placehold.it/600x1200/d35400/000" alt="">
      </div>
      <div class="item">
        <img src="http://placehold.it/600x600/c0392b/000" alt="">
      </div>
    </div>

    <!-- controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
    
  </div>

</div>
1
Yadhu Babu 15 जुलाई 2017, 12:39

फ्लेक्सबॉक्स का उपयोग करके उन्हें केंद्र में रखने का दूसरा तरीका है। आपको मूल रूप से इन दो गुणों को display: flex; justify-content: center; को अपनी .carousel-inner कक्षा में जोड़ना होगा। display: flex; एक फ्लेक्सबॉक्स बनाएगा और justify-content: center;छवियों को क्षैतिज रूप से केन्द्रित करेगा।

.tales {
  width: 100%;
}
.carousel-inner{
  width:100%;
  display: flex;
  justify-content: center; 
  max-height: 400x !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <!-- indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- inner -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img  src="http://placehold.it/1200x600/2c3e50/000" alt="">
      </div>
      <div class="item">
        <img src="http://placehold.it/600x1200/d35400/000" alt="">
      </div>
      <div class="item">
        <img src="http://placehold.it/600x600/c0392b/000" alt="">
      </div>
    </div>

    <!-- controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
    
  </div>

</div>
1
flosommerfeld 15 जुलाई 2017, 12:41

मुझे लगता है कि यह आपके लिए मदद कर सकता है। मैंने आपके कोड की कोशिश की यह मेरे लिए ठीक काम कर रहा है

बूटस्ट्रैप हिंडोला या किसी भी स्लाइडर के लिए सभी छवियों को समान ऊंचाई और चौड़ाई के साथ चुनना बेहतर है

अन्यथा, हमें सीएसएस का उपयोग करके वजन और चौड़ाई को कुछ ऊंचाई तक ठीक करने की आवश्यकता है

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
  .carousel-inner img
   {
     width: 100%;
     height: 500px !important;
   }
</style>
<!-- html-->
<div class="container">
 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <!-- indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- inner -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://placehold.it/1200x600/2c3e50/000" class="img-responsive" alt="">
      </div>
      <div class="item">
        <img src="http://placehold.it/600x1200/d35400/000" class="img-responsive" alt="">
      </div>
      <div class="item">
        <img src="http://placehold.it/600x600/c0392b/000" class="img-responsive" alt="">
      </div>
    </div>

    <!-- controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>

 </div>
</div>
1
shiva krishna 15 जुलाई 2017, 12:57