时间戳

首页 > 解决方案 > Bootstrap 4 mr-auto 无法正常工作

html - Bootstrap 4 mr-auto 无法正常工作

问题描述

我有一个片段：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<header>
  <div class="container">
    <div class="row">
      <div class="col-lg-3">
        <div class="logo">
          <img src="#" alt=" logotype">
        </div>
      </div>
      <div class="col-lg-9">
        <div class="head-buttons mr-auto">
          <a href="">Русский</a>
          <div class="auth-buttons">
            <button>Войти</button>
            <button>Регистрация</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

我希望 col-lg-9 这个 div 中的所有内容都向右对齐。为什么mr-auto不工作？我该如何解决？我试过justify-content-end并排，不工作..

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

auto-margins 适用于 flexbox 容器，但col-lg-9不是 flexbox 容器。使用d-flex使其成为 flexbox 容器，然后ml-auto将内容推送到右侧。

 <div class="row">
    <div class="col-lg-3">
        <div class="logo">
            <img src="#" alt="logotype">
        </div>
    </div>
    <div class="col-lg-9 d-flex">
        <div class="head-buttons ml-auto">
            <a href="">Русский</a>
            <div class="auth-buttons">
                <button>Войти</button>
                <button>Регистрация</button>
            </div>
        </div>
    </div>
 </div>

另一种选择是使用col-lg-auto将右列的宽度缩小到其内容。然后ml-auto在列上也可以工作。

  <div class="row">
      <div class="col-lg-3">
            <div class="logo">
                <img src="#" alt=" logotype">
            </div>
        </div>
        <div class="col-lg-auto ml-auto">
            <div class="head-buttons">
                <a href="">Русский</a>
                <div class="auth-buttons">
                    <button>Войти</button>
                    <button>Регистрация</button>
                </div>
            </div>
       </div>
  </div>

https://www.codeply.com/go/4n4R9cNrqE

推荐阅读