Question

我尝试了多个 StackOverflow答案和其他站点，试图使轮播中的图像居中，但没有一个起作用。我不确定该怎么做，所以我将发布代码，并根据需要尝试提供帮助。

我将Flask用作网络服务器，因此我的代码中将包含{{ variable }}部分。

HTML：

<div class="c-wrapper">
  <div class="carousel slide" data-ride="carousel" id="next">
    <div class="carousel-inner" id="inner">
      <div class="carousel-item active item" style="height: 500px; width: 500px;">
        <img class="d-block w-100" src="{{ url_for('static', filename='img/Logo7.png') }}" alt="Slide">
      </div>
    </div>
    <a class="carousel-control-prev" href="#next" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#next" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
<script type="text/javascript">
  var arr = JSON.parse('{{ cards | tojson }}')
  var i;
  for (i = 0; i < arr.length; i++) {
    var imagelink = arr[i].imagelink
    document.getElementById("projects").innerHTML += '<div class="card text-white bg-dark" style="width: 18rem;"><img class="card-img-top" src="' + imagelink + '" alt="logo" style="width: 18rem"><div class="card-body"><h5 class="card-title">' + arr[i].title + '</h5><p class="card-text">' + arr[i].text + '</p><a href="' + arr[i].link + '" class="btn btn-success">Visit</a></div></div>'
  }
  var arr2 = JSON.parse('{{ carousel | tojson }}')
  var i2;
  for (i2 = 0; i2 < arr2.length; i2++) {
    var imagelink2 = arr2[i2].imagelink
    document.getElementById("inner").innerHTML += '<div class="carousel-item item" style="height: 500px; width: 500px;"><img class="d-block w-100" src="' + imagelink2 + '" alt="Slide"></div>'
  }
</script>
<style type="text/css">
  .c-wrapper {
    width: 80%;
    /* for example */
    margin: auto;
  }
  
  .carousel img {
    margin: auto;
  }
</style>

Answer 1

删除carousel-item上的内联样式

.c-wrapper {
  width: 80%;
  /* for example */
  margin: auto;
}

.carousel img {
  margin: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<div class="c-wrapper">
  <div class="carousel slide" data-ride="carousel" id="next">
    <div class="carousel-inner" id="inner">

      <div class="carousel-item active item">
        <img class="d-block w-100" src="https://picsum.photos/500/500" alt="Slide">
      </div>

      <div class="carousel-item item">
        <img class="d-block w-100" src="https://picsum.photos/500/500" alt="Slide">
      </div>

      <div class="carousel-item item">
        <img class="d-block w-100" src="https://picsum.photos/500/500" alt="Slide">
      </div>


    </div>
    <a class="carousel-control-prev" href="#next" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#next" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

Bootstrap 4轮播图片未居中

1 个答案: