如何在 bootstrap 容器中居中对齐文本？

Question

我是初学者，正在学习使用 bootstrap 编写代码。添加 jumbotron 组件后我添加的所有内容似乎都向左对齐并坚持下去。我已经尝试过 .text-center 以及 CSS "text-align: center;" 和 "margin:0 auto;"

的自定义样式

我是新来的，希望这是显示我的代码的正确方式，但这是我的代码：

<head>

    <title>MyApp</title>

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

    <style type="text/css">
        .navbar-brand       {
                            margin-right:10px;
                            position:relative;
                            top:2px;
                            }
        .jumbotron          {
                            margin-top:50px;
                            background-image: URL(BG.jpg);
                            background-size: 100% 100%;
                            text-align:center;
                            color: white;
                            }
        .input-group        {
                            width:350px;
                            }
        #formAlign          {
                            text-align:center;
                            width:350px;
                            margin:0 auto;
                            margin-top:30px;
                            }
        #appsum             {
                            text-align:center;
                            }

    </style>

</head>

<body>

    <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">

        <a class="navbar-brand" href="#">
            <img src="logo.png" width="100" height="30" alt="">
        </a>

                <ul class="navbar-nav mr-auto">

                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#">Download The App</a>
                    </li>

                </ul>

                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="email" placeholder="Email" aria-label="Search">
                    <input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="Search">
                    <button class="btn btn-info my-2 my-sm-0" type="submit">Login</button>
                </form>
    </nav>

    <div class="jumbotron">
        <h1 class="display-4">My Awesome App</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <hr class="my-4">
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>

            <div id="formAlign">
                <div class="form-horizontal">

                    <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>

                    <div class="input-group mb-0 mr-sm-2">
                        <div class="input-group-prepend">
                            <div class="input-group-text">@</div>
                        </div>

                        <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">

                        <a class="btn btn-primary btn-md ml-2" href="#" role="button">Sign Up</a>
                    </div>

                </div>
            </div>
    </div>

    <div class="container" id="appsum">

        <div class="row">
            <h1>Why this is so awesome.</h1>        
        </div>
        <div class="row">
            <p class="lead">Summary, once again, of your app's awesomeness</p>          
        </div>

    </div>

        <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.3/umd/popper.min.js" 
            integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
            crossorigin="anonymous">
        </script>

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
            integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
            crossorigin="anonymous">
        </script>

</body>

Answer 1

Bootstrap 网格格式要求每个 .row div 仅包含 .col 或 .col-* div 作为直接子项。看起来嵌套在行中的 div 不在列中。

试试这个：

<div class="container" id="appsum">

    <div class="row">
        <div class="col">
            <h1>Why this is so awesome.</h1>
        </div>        
    </div>
    <div class="row">
        <div class="col">
            <p class="lead">Summary, once again, of your app's awesomeness</p>  
        </div>        
    </div>

</div>

当然，您可以使用 col-* 类（其中 * 是 1 到 12 之间的数字或断点大小）来设置列宽或断点。

在此处查看 Bootstrap 4 网格布局文档：https://getbootstrap.com/docs/4.0/layout/grid/

如何在 bootstrap 容器中居中对齐文本？

How do I center align text in bootstrap container?

javascript

twitter-bootstrap

css

bootstrap-4

text-align