将 bootstrap 3 中的页脚更改为 Bootstrap 4

Question

最近我切换到 bootstrap 4，但有些东西崩溃了，例如我的页脚就是其中之一

<div class="copyright">
<div class="container">
    <div class="col-md-6 " >
        <p>© Copyright  @DateTime.Now.Year. - LMS/US-LOG/OLNF/TM</p>
    </div>
    <div class="col-md-6" >
        <ul class="bottom_ul">
            <li><a></a></li>
            <li><a href="#">SGMAR</a></li>
            <li><a href="#">Suporte</a></li>
            <li><a href="#">Chamados</a></li>
            <li><a href="#">Recursos</a></li>
        </ul>
    </div>
</div>

.bottom_ul { list-style-type:none; float:right; margin-bottom:0px;}
.bottom_ul li { float:left; line-height:40px;}
.bottom_ul li:after { content:"/"; color:#FFF; margin-right:8px; margin-  left:8px;}
.bottom_ul li a { color:#FFF;  font-size:12px;}

FOOTER

菜单应该在最右边。 我应该做出哪些改变？

Answer 1

您需要将 col div 放在 row div 中。 要在 bootstrap-4 中有一个内联无序列表 (ul)，您需要将类 list-inline 应用到它，并将 list-inline-item 类应用到它的列表项目。

<div class="copyright">
  <div class="container">
    <div class="row">
        <div class="col-md-6 ">
            <p>© Copyright  @DateTime.Now.Year. - LMS/US-LOG/OLNF/TM</p>
        </div>
        <div class="col-md-6 text-right">
            <ul class="list-inline">
                <li class="list-inline-item"><a href="#">SGMAR</a></li> /
                <li class="list-inline-item"><a href="#">Suporte</a></li> /
                <li class="list-inline-item"><a href="#">Chamados</a></li> /
                <li class="list-inline-item"><a href="#">Recursos</a></li> /
            </ul>
        </div>
    </div>
</div>

您可以在此处查看结果： https://www.codeply.com/go/yCF1H0dMPE

其他链接：

http://v4-alpha.getbootstrap.com/content/typography/#inline - 内联 ul https://getbootstrap.com/docs/4.0/layout/grid/ - 网格系统

Answer 2

如果您移除 style{} 选择器，它应该可以工作。

.bottom_ul {
  list-style-type: none;
  float: right;
  margin-bottom: 0px;
}

<div class="copyright">
  <div class="container">
    <div class="col-md-6 ">
      <p>© Copyright @DateTime.Now.Year. Petrobras - LMS/US-LOG/OLNF/TM</p>
    </div>
    <div class="col-md-6">
      <ul class="bottom_ul">
        <li>
          <a></a>
        </li>
        <li><a href="#">SGMAR</a></li>
        <li><a href="#">Suporte</a></li>
        <li><a href="#">Chamados</a></li>
        <li><a href="#">Recursos</a></li>
      </ul>
    </div>
  </div>