我的卡片在垂直而非水平方向对齐。令人惊讶的是,我找不到任何人遇到此问题。任何帮助将不胜感激。
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-lg-offset-5 centre" >
<div>
<div class="back-img">
<span>
<img src="/assets/logo.png" alt="logo" style="height: 30%; margin-top: 5%; margin-left: 35%;"/>
</span>
<div class="card-deck">
<div class="card">
<div class="card-body">
<p class="card-text"><small class="text-muted"> notes </small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<p class="card-text"><small class="text-muted"> notes </small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<p class="card-text"><small class="text-muted"> notes </small></p>
</div>
</div>
</div>
css: 的总容器为300px。我尝试将每张卡片的宽度设置为20px。仍然所有卡都垂直对齐。
.card {
background-color: #e6ecf0;
height: 70px;
}
答案 0 :(得分:0)
不确定是什么原因导致了问题。检查所有父元素,但仍然存在相同问题。
而不是使用card-deck的col-xs水平对齐项目,<div class="card-deck">
<div class="col-xs-4">
<div class="card">
<div class="card-body">
<p class="card-text"><small class="text-muted"> notes </small></p>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card">
<div class="card-body">
<p class="card-text"><small class="text-muted"> notes </small></p>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card">
<div class="card-body">
<p class="card-text"><small class="text-muted">
notes </small></p>
</div>
</div>
</div>
</div>