Измените нижний колонтитул, который был в начальной загрузке 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 внутри строки div.Чтобы иметь встроенный неупорядоченный список (ul) в bootstrap-4, вам нужно применить класс 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 /содержание / типография / # inline - встроенный ul https://getbootstrap.com/docs/4.0/layout/grid/ - Grid system

Answer 2

Должно работать, если вы удалите селектор стиля {}.

.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>