Question

我正尝试在卡片上并排列出带有图像和名称的动漫列表，但是DIV结束并且图像忽略并继续，该如何解决？

URL：Here

css：

.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    min-width: 199px;
    max-width: 200px;
    float:left;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left:5px;
    margin-top:10px;
}

HTML：

<div class="container">
    <div class="card">
    <button class="btn btn-success add" onclick="novoEpisodio(85)"><span class="fa fa-plus"></span> Adicionar Episódio</button>
                <img onclick="escolherAnime(85)" src="https://4.bp.blogspot.com/-TYMOypUwSGI/WcqOASxepZI/AAAAAAAAK2w/-_V0RHPcEj8d0IO79AyUf2oUFTRRa3TjgCLcBGAs/s1600/Black-Clover-anime-poster-visual-v1.jpg" style="min-width:199px; max-width:200px; min-height:299px; max-height: 300px;">
                <div class="container">
                  <h4><b>Black Clover</b>

                  </h4>

                </div>
                 </div>

Answer 1

首先，您所使用网站的Bootstrap版本已与您使用的HTML语法过时。卡片替换了 Bootstrap 3 中的面板。您正在使用 Bootstrap 3 ，view here，它使用面板。

Bootstrap 3和Bootstrap 4之间发生了很多变化。我强烈建议您使用 Bootstrap 4 。此外，您的HTML语法与传统布局不符。

container > row > column > card

这是一个 Codepen ，您可以进行分叉和玩耍。

以下是使用Bootstrap 4所需的示例。

/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto');

html, body {
  height: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
}


/* Custom CSS */
.text-strong {
  font-weight: bold;
}

.card-body {
  padding: .5rem;
}

.card-title {
  margin: 0;
}

.card {
  border: 2px dashed black;
  box-shadow: 0px 10px 20px rgba(150,150,150,.5);
}

.card:hover {
  box-shadow: 0px 10px 20px  rgba(60, 141, 188,0.5);
}

<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'>
<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.bundle.min.js'></script>

<div class="container-fluid p-5">
  <div class="row no-gutters">
    <div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
      <div class="card">
        <img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
        <div class="card-body">
          <h5 class="card-title text-strong">Bleach</h5>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
      <div class="card">
        <img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
        <div class="card-body">
          <h5 class="card-title text-strong">Black Clover</h5>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
      <div class="card">
        <img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
        <div class="card-body">
          <h5 class="card-title text-strong">Boku dake ga in...</h5>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
      <div class="card">
        <img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
        <div class="card-body">
          <h5 class="card-title text-strong">Dragon Ball Super</h5>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
      <div class="card">
        <img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
        <div class="card-body">
          <h5 class="card-title text-strong">Nanatsu no Taizai</h5>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
      <div class="card">
        <img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
        <div class="card-body">
          <h5 class="card-title text-strong">Naruto Shippuden</h5>
        </div>
      </div>
    </div>    
  </div>
</div>

我该如何解决？卡超出DIV

1 个答案: