在bootstrap中垂直堆叠div

Question

我正在使用(.info-box)创建一个Bootstrap框，其中包含一条文本和两条(.info-line)行（一条在文本上方，另一条在下方）。在悬停时，我希望线条通过扩展其宽度来制作动画。我已完成动画，但我无法垂直获得div堆栈。

如何在Bootstrap中垂直堆叠div？

.info-box {
  text-align: center;
  height: 200px;
  color: white;
}

.info-box .info-header {
  background-color: #3178b9;
  height: 90%;
  border: 1px solid #f5f0e7;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: all 150ms ease-out;
  -moz-transition: all 150ms ease-out;
  -o-transition: all 150ms ease-out;
  transition: all 150ms ease-out;
}

.info-box .info-header:hover {
  background-color: #b4a28f;
  border: 5px solid #f5f0e7;
  -webkit-transition: all 150ms ease-in;
  -moz-transition: all 150ms ease-in;
  -o-transition: all 150ms ease-in;
  transition: all 150ms ease-in;
}

.info-box .info-header .info-line {
  float: left;
  background-color: white;
  height: 2px;
  width: 0%;
  -webkit-transition: all 150ms ease-out;
  -moz-transition: all 150ms ease-out;
  -o-transition: all 150ms ease-out;
  transition: all 150ms ease-out;
}

.info-box .info-header:hover .info-line {
  background-color: white;
  height: 2px;
  width: 30%;
  -webkit-transition: all 150ms ease-in;
  -moz-transition: all 150ms ease-in;
  -o-transition: all 150ms ease-in;
  transition: all 150ms ease-in;
}

.info-content-box {
  padding-bottom: 30px;
  width: 100%;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<div class="col-md-3 info-box">
  <div class="info-header" data-name="content1">
    <div class="info-line"></div>
    <p>hello</p>
    <div class="info-line"></div>
  </div>
</div>

Answer 1

而不是浮动.info-line，使其成为display: inline-block，因为你在.info-header上使用display: flex，你也应该使它flex-direction: column所以它使它的项目堆栈在彼此身上。

请参阅更新的代码：

.info-box {
  text-align: center;
  height: 200px;
  color: white;
}

.info-box .info-header {
  background-color: #3178b9;
  height: 90%;
  border: 1px solid #f5f0e7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -webkit-transition: all 150ms ease-out;
  -moz-transition: all 150ms ease-out;
  -o-transition: all 150ms ease-out;
  transition: all 150ms ease-out;
}

.info-box .info-header:hover {
  background-color: #b4a28f;
  border: 5px solid #f5f0e7;
  -webkit-transition: all 150ms ease-in;
  -moz-transition: all 150ms ease-in;
  -o-transition: all 150ms ease-in;
  transition: all 150ms ease-in;
}

.info-box .info-header .info-line {
  display: inline-block;
  background-color: white;
  height: 2px;
  width: 0%;
  -webkit-transition: all 150ms ease-out;
  -moz-transition: all 150ms ease-out;
  -o-transition: all 150ms ease-out;
  transition: all 150ms ease-out;
}

.info-box .info-header:hover .info-line {
  background-color: white;
  height: 2px;
  width: 30%;
  -webkit-transition: all 150ms ease-in;
  -moz-transition: all 150ms ease-in;
  -o-transition: all 150ms ease-in;
  transition: all 150ms ease-in;
}

.info-content-box {
  padding-bottom: 30px;
  width: 100%;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<div class="col-md-3 info-box">
  <div class="info-header" data-name="content1">
    <div class="info-line"></div>
    <p>hello</p>
    <div class="info-line"></div>
  </div>
</div>