Bootstrap 4卡槽在垂直而不是水平对齐卡

时间:2019-09-10 01:49:35

标签: bootstrap-4

我的卡片在垂直而非水平方向对齐。令人惊讶的是,我找不到任何人遇到此问题。任何帮助将不胜感激。

<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;
    }

1 个答案:

答案 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>