Question

我正在尝试使用.float-lg-right（正式.pull-lg-right）创建一个引导程序网站，其菜单导航内容与右侧对齐。问题是ul保持与左边对齐。有趣的是，使用.float-md-right，内容在折叠菜单中与右侧对齐。

<!DOCTYPE html>
    <html lang="en">
        <head>
            <!-- META DATA -->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <meta name="description" content="">
            <meta name="author" content="">
            <title>TEXT</title>
            <!-- CSS & ASSETS-->
            <link href="css/bootstrap.min.css" rel="stylesheet">
        </head>
        <body>
            <nav class="navbar navbar-toggleable-md mb-4">
                <div class="container">
                    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                        data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false"
                        aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                    </button>
                    <a class="navbar-brand" href="#">TEST</a>
                    <div class="collapse navbar-collapse" id="navbarCollapse">
                        <ul class="navbar-nav mr-auto float-lg-right">
                            <li class="nav-item">
                                <a class="navlink" href="#">TEXT</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- SCRIPTS -->
            <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
                integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
                crossorigin="anonymous"></script>
            <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
                integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
                crossorigin="anonymous"></script>
            <script src="js/bootstrap.min.js"></script>
        </body>
    </html>

Answer 1

有关的浮 - * - 右使用毫升的自动

有关的浮 - * - 左使用 MR-自动

Answer 2

我有同样的问题，拥有v4 alpha 6的人主要是在这种情况下。所以我看了几天的bootstrap文档，最后找到了解决方案。

浮动到左侧：

<div class="d-flex justify-content-end">
    <div class="mr-auto">Flex item</div>
    <div>Flex item</div>
    <div>Flex item</div>
</div>

浮动到右侧：

<div class="d-flex justify-content-start">
    <div>Flex item</div>
    <div>Flex item</div>
    <div class="mr-auto p-2">Flex item</div>
</div>

有关详细信息，请访问：https://v4-alpha.getbootstrap.com/utilities/flexbox/#with-justify-content

我建议v4 alpha 6用户应该看看这个答案

Answer 3

我刚刚发现，如果我排除class =＆＃34; row＆＃34;关于专利要素，它允许我在离婚时使用class =＆＃34; col-12 col-md-5＆＃34 ;.

<div>
<div class="col-12 col-md-5 float-md-right">
This floats right
</div>
<div class="col-12 col-md-6 offset-md-6">
Thus is on left
</div>
</div>

Bootstrap v4-Alpha 6 | .float-lg-right无法正常工作

3 个答案: