Question

我正在尝试将页面内容与导航栏的“主页”按钮对齐，这是我目前的结果

如您所见，“用户”字段和搜索栏与主页按钮没有很好地对齐。

这是页面的所有 HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='index.css') }}">
    
</head>

<body style="height: 100vh;
    background: linear-gradient(to bottom right, #33ccff 0%, #ff99cc 100%);">
    <header class="navbar navbar-expand-md navbar-dark bd-navbar">
        <ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
            <li class="nav-item col-6 col-md-auto">
                <a class="nav-link home-btn" aria-current="page" href="/">Home</a>
            </li>
        </ul>

        <hr class="text-white-50">
        <a class="btn btn-bd-sign-in d-lg-inline-block my-2 my-md-0 ms-md-3" href="/auth/sign-in">Sign in</a>
        <a class="btn btn-bd-sign-up d-lg-inline-block my-2 my-md-0 ms-md-3" href="/auth/sign-up">Sign up</a>
        
    </header>

    <div class="container-fluid">
        <div class="row flex-xl-nowrap">
            <h2 class="ml-5" style="color: white;">Users</h2>
        </div>
        <div class="row flex-xl-nowrap">
            <div class="input-group mb-3 w-50 ml-5 justify-content-start">
                <input type="text" class="form-control" placeholder="Search by username" aria-label="Search by username" aria-describedby="basic-addon2">
                <div class="input-group-append">
                    <button class="btn btn-outline-primary" type="button">Search</button>
                </div>
            </div>
            <hr class="text-white-50">
            <div class="input-group mb-3 w-50 mr-3 justify-content-end">
                <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
                    <button type="button" class="btn btn-primary">Left</button>
                    <button type="button" class="btn btn-primary">Middle</button>
                    <button type="button" class="btn btn-primary">Right</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

我是 Bootstrap 的新手，所以我不太了解如何对齐元素。

Answer 1

解决方案之一是覆盖 padding-left 类的 .container-fluid 属性：

.container-fluid.padding-left {
  padding-left: 0.3rem;
}

示例：

@media (min-width: 768px) {
  .container-fluid.padding-left {
    padding-left: 0.3rem;
  }
}

@media (max-width: 767px) {
  .container-fluid.padding-left {
    padding-left: 0;        
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='index.css') }}">
    
</head>

<body style="height: 100vh;
    background: linear-gradient(to bottom right, #33ccff 0%, #ff99cc 100%);">
    <header class="navbar navbar-expand-md navbar-dark bd-navbar">
        <ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
            <li class="nav-item col-6 col-md-auto">
                <a class="nav-link home-btn" aria-current="page" href="/">Home</a>
            </li>
        </ul>

        <hr class="text-white-50">
        <a class="btn btn-bd-sign-in d-lg-inline-block my-2 my-md-0 ms-md-3" href="/auth/sign-in">Sign in</a>
        <a class="btn btn-bd-sign-up d-lg-inline-block my-2 my-md-0 ms-md-3" href="/auth/sign-up">Sign up</a>
        
    </header>

    <div class="container-fluid padding-left">
        <div class="row flex-xl-nowrap">
            <h2 class="ml-5" style="color: white;">Users</h2>
        </div>
        <div class="row flex-xl-nowrap">
            <div class="input-group mb-3 w-50 ml-5 justify-content-start">
                <input type="text" class="form-control" placeholder="Search by username" aria-label="Search by username" aria-describedby="basic-addon2">
                <div class="input-group-append">
                    <button class="btn btn-outline-primary" type="button">Search</button>
                </div>
            </div>
            <hr class="text-white-50">
            <div class="input-group mb-3 w-50 mr-3 justify-content-end">
                <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
                    <button type="button" class="btn btn-primary">Left</button>
                    <button type="button" class="btn btn-primary">Middle</button>
                    <button type="button" class="btn btn-primary">Right</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

引导程序如何将内容与导航栏对齐

1 个答案: