Question

在我的主页上，在一些文本信息之后创建了一个Bootstrap Carousel。我不想在我的页面中使用大型Carousel，因此我使用<div class="col-sm-6">缩小了大小。但是我的Carousel位于页面的左侧，我无法将其置于中心位置。我想把它放在我页面的中心。我使用的代码是：

<div class="container">
<h4 class="text-justify">text here </h4>
</div>

<div class="container">
    <div class="col-sm-6">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active"><img src="https://upload.wikimedia.org/xx.JPG" alt=""></div>
          <div class="item"><img src="https://upload.wikimedia.org/wikipedia/xxxx.JPG" alt=""></div>
          </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>    
        </div></div></div>

我的CSS代码是

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
      width: 100%;
      margin: auto;
          }

如何更改位置？

Answer 1

首先，您必须将col-sm-6放在一行中，然后您只需添加一个类＆＃34; col-centered＆＃34;并添加以下CSS

.col-centered{
   float: none;
   margin: 0 auto;
}

您的最终代码将如下：

<div class="container">
  <h4 class="text-justify">text here </h4>
</div>

<div class="container">
<div class="row">
 <div class="col-sm-6 col-centered">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active"><img src="https://upload.wikimedia.org/xx.JPG" alt=""></div>
      <div class="item"><img src="https://upload.wikimedia.org/wikipedia/xxxx.JPG" alt=""></div>
      </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>    
    </div>
  </div>
</div>
 </div>

Answer 2

应用此样式。以下代码可以使用。

<div class="col-sm-6" style="
    margin: 0 auto;
    float: none;">

以Bootstrap Carousel为中心

2 个答案: