Как выровнять текст по центру в контейнере начальной загрузки?

Я начинающий учиться кодировать с начальной загрузкой. Все, что я добавляю после добавления компонента jumbotron, похоже, выравнивается по левому краю и придерживается его. Я пробовал.text-center, а также пользовательские стили с помощью CSS "text-align: center;" и "поле:0 авто;"

Я новичок здесь и надеюсь, что это правильный способ показать мой код, но вот мой код:

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

Источник

1 ответ

Решение

Формат сетки Bootstrap требует, чтобы каждый .row div содержит только .col или же .col-* divs как непосредственные дети. Похоже, что ваши 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/

Источник
Другие вопросы по тегам