html - 我该如何解决？卡出DIV

Question

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

网址:Here

图片:The image

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 和 4 之间发生了很多变化。我强烈建议您使用 Bootstrap 4。此外，您的 HTML 语法与传统布局不一致。

container > row > column > card

这是一个 Codepen 你可以 fork 和玩。

这是使用 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>