Question

我正在使用bootstrap并使用flex进行布局。

目前按钮正在占据容器的高度。文本下面有很多空间，我想删除i，当我向按钮添加填充时，它的大小会变得不均匀。我试图通过行高来调整大小，但我试图找到实际的解决方案以及为什么我遇到这个问题的原因。

我在这里缺少任何与flex相关的东西，还是其他东西？任何帮助将受到高度赞赏。感谢。

.vessel-card {
  display: flex;
  flex-direction: column;
}
.vessel-card h3 {
  margin: 0;
  padding: 20px 0;
}
.departure-card {
  display: flex;
  padding: 20px 0;
  border-top: 2px solid #888;
}
.departure-card p {
  margin-right: 10px;
}
.departure-card:last-child {
  border-bottom: 2px solid #888;
}
.departure-card .btn-explore {
  border: 1px solid #000;
  display: inline-block;
  text-transform: uppercase;
  color: #000;
  border-radius: 0;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-4 vessel-card">
      <a href="cienfuegos-from-havana.html" class="special-departure">
        <img src="http://placehold.it/350x150">
      </a>
      <h3>Vessel: Panorama</h3>
      <div class="departure-card">
        <p>Havana to Cienfuegos starting at $5,999</p>
        <a href="#" class="btn btn-explore">Explore</a>
      </div>
      <div class="departure-card">
        <p>Havana to Cienfuegos starting at $5,999</p>
        <a href="cienfuegos-from-havana.html" class="btn btn-explore">Explore</a>
      </div>
    </div>
  </div>
</div>

Answer 1

Flexbox 使项目height与Demo相同.parent { align-items: center; display: flex; } .child { border: 1px solid black; margin: 5px; } .child:first-child { height: 100px; }，但您可以使用align-items来更改或Demo }

＆＃13;

<div class="parent">
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>

＆＃13;

Ti.Platform.osname;

＆＃13;

Answer 2

非常简单的解决方案

不需要css，只需用button或span包裹div

<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex justify-content-around bg-info" style="height: 160px;">
  <span>
    <button class="btn btn-success">Hurrah, no effect :)</button>
  </span>
 
  <button class="btn btn-danger">Aw, flex infected me ;(</button>
</div>

Answer 3

您需要在段落中包含该按钮。我还在ON agegroup.aid = users.aid的按钮中添加了padding，以便该框不是非常靠近文本，但可以更改值以满足您的需要，或者如果不需要则可以完全删除。

5px

.vessel-card {
  display: flex;
  flex-direction: column;
}
.vessel-card h3 {
  margin: 0;
  padding: 20px 0;
}
.departure-card {
  display: flex;
  padding: 20px 0;
  border-top: 2px solid #888;
}
.departure-card p {
  margin-right: 10px;
}
.departure-card:last-child {
  border-bottom: 2px solid #888;
}
.departure-card .btn-explore {
  border: 1px solid #000;
  display: inline-block;
  text-transform: uppercase;
  color: #000;
  border-radius: 0;
  padding: 5px;
}

Answer 4

这是一个更简单的解决方案。此解决方案将按钮水平对齐到中心，并且不会与按钮或其他子元素的高度混淆。

.parent {
  display: flex;
  align-items: center;
}

按钮高度的柔性属性混乱？

4 个答案:

非常简单的解决方案