Как центрировать две колонки с кнопками в них в строке начальной загрузки? - PullRequest
Новая
       1

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

0 голосов
/ 18 февраля 2019

Я работаю над выравниванием двух кнопок в центре ряда в начальной загрузке.Я поместил две кнопки в два столбца, а этот столбец - в один большой столбец, чтобы центрировать все элементы.Он центрируется, но накладывается друг на друга.Я хочу, чтобы кнопки были выровнены рядом в центре строки, как показано на этом изображении: Изображение, показывающее желаемый результат

Вот мой код: 

.con
{
    margin: 0;
    padding: 0;
}
<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <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">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container-fluid con">
    <div class="row">
        <div class="col-lg-4 mx-auto">
            <div class="col-sm-6 mx-auto">
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                    Sign Up
                </button>
            </div>
            <div class="col-sm-6 mx-auto">
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                    Log in
                </button>
            </div>
        </div>
    </div>
</div>
</body>
<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>

</html>

Я искал в стеке поток возможных ответов, но в моем поиске не нашел ответа.Если ответ уже дан, и вы знаете об этом, пожалуйста, направьте меня к нему.

Ответы [ 2 ]

0 голосов
/ 18 февраля 2019

Я бы использовал класс .off-set для выделения элементов div, а затем класс text-center для центрирования кнопок внутри элементов div.Вы также можете поиграть с шириной cols, но я думаю, вы поняли идею.

    <!DOCTYPE html>
<html>
    <head>
        <title>Home</title>
         <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
         <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">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-2 offset-4 text-center">
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                  Sign Up
          </button>
        </div>
        <div class="col-2 text-center">
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                  Log in
          </button>
        </div>
      </div>
    </div>
    </body>
    <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>

</html>

Ручка: https://codepen.io/anon/pen/YBBKQL

0 голосов
/ 18 февраля 2019

Для достижения ожидаемого результата используйте опцию ниже

  1. Внутри строки класса div используйте 4 столбца с двумя средними столбцами, имеющими элементы div с кнопками, т.е. с классом - col-sm-3

  2. Удаление div с помощью класса - col-lg-4 mx-auto, чтобы центрировать кнопку div внутри класса div div 

.con
{
    margin: 0;
    padding: 0;
}
<!DOCTYPE html>
<head>
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <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">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container-fluid con">
    <div class="row">
        <div class="col-sm-3 mx-auto"></div>
        <div class="col-sm-3 mx-auto">
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                Sign Up
            </button>
        </div>
        <div class="col-sm-6 mx-auto">
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                Log in
            </button>
        </div>
    </div>
</div>
</body>
<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>

</html>

codepen - https://codepen.io/nagasai/pen/ZwwzrO

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...