Почему div без класса предельной ширины - PullRequest
Новая
       0

Почему div без класса предельной ширины

0 голосов
/ 12 сентября 2018

Я использую bootstrap для стилизации простой формы. Я хочу, чтобы две кнопки были выровнены рядом друг с другом и заключены в контейнер div, чтобы я мог расположить их обе рядом друг с другом. Как только я заключаю их в div без какого-либо связанного с ним класса, ширина ограничивается, и одна кнопка переходит на следующую строку. Почему это ??

Моя скрипка 

<!DOCTYPE html>
<html>
    <head>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- Leave those next 4 lines if you care about users using IE8 -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="row">
            <div> <!-- Why does this div tag limit width? -->
                <button class='col-sm-12 col-md-2'>Cancel</button>
                <button class='col-sm-12 col-md-2'>Save</button>
            </div>
        </div>

        <div class="row">
            <button class='col-sm-12 col-md-2'>Cancel</button>
            <button class='col-sm-12 col-md-2'>Save</button>
        </div>
    </body>
</html>

Я хочу заключить обе кнопки в элемент div и выровнять их рядом друг с другом. Может кто-нибудь объяснить, почему тег div ограничивает ширину?

Ответы [ 2 ]

0 голосов
/ 12 сентября 2018

div, помещенный в первую строку, является непосредственным дочерним элементом класса row.В Bootstrap 4 этот элемент должен содержать классы столбцов (col(-breakpoint)(-width)), что имеет место со второй строкой, у кнопок которой есть классы столбцов.

Поэтому элемент без стиля нарушает связь между rowclass и кнопки с классами столбцов, приводящие к нежелательному рендерингу, который виден в вашей скрипке.

Поэтому вторая строка является правильной реализацией.

0 голосов
/ 12 сентября 2018

Если вы хотите использовать систему сетки Bootstrap по назначению, вы должны следовать следующему формату: 

<element class="container">  //Or container-fluid
  <element class="row">
    <element class="col-whatever">
    </element>
    <element class="col-whatever">
    </element>
  </element>
</element>

Другими словами, вам нужен контейнер, затем строка, а затем столбцы.Ваш div между строкой и столбцами является проблемой.Есть множество способов применить это к вашему HTML.Вот один из способов: 

<div class="container-fluid">
  <div class="row">
    <button class='col-sm-12 col-md-2'>Cancel</button>
    <button class='col-sm-12 col-md-2'>Save</button>
  </div>


 <div class="row">
    <button class='col-sm-12 col-md-2'>Cancel</button>
    <button class='col-sm-12 col-md-2'>Save</button>
 </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...