Bootstrap 5列在我的設計中無法正常工作:(

Question

在Bootstrap上工作，我需要完全按照以下步驟開發頁腳

這是我的HTML代碼部分

<footer class="footer">
<div class="row">
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 footer-Darkerblue">
        <div class="text-center">
            <ul class="footer-ul">
                <li class="footer-headtext text-uppercase">
                    destination
                </li>
                <li class="footer-Kilomet">
                    6.8 Kms
                </li>
                <li class="footer-min">
                    25 Min away
                </li>
            </ul>
        </div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 footer-Darkenblue">
        <ul class="footer-ul">
            <li>
                Status
            </li>
            <li>
                In Transit
            </li>                       
        </ul>
    </div>

這是小提琴鏈接

請指導我哪里我錯了我沒有得到確切的輸出

Answer 1

好的，看一下您的代碼，發現您有幾個結束標記不合適。

你有過：

<div class="footer-left-border"></div>

只需將結束標記移動到數據下方。

<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
  <div class="footer-left-border">
  <ul class="footer-ul">
    <li class="footer-headtext text-uppercase">
      DATE
    </li>
  </ul>
  <ul class="footer-ul list-inline footer-text-date">
    <li>
      <em class="fa fa-calendar"></em> 25 Dec, 2015
    </li>
    <li>
      <em class="fa fa-clock-o"></em> 16:30
    </li>
  </ul>
  </div>
</div>

這是您的代碼的JSFiddle分叉 ，顯示了這一點。

請享用！