Question

我正在使用引导程序来设计简单表单的样式，我希望将两个按钮彼此并排放置在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标签会限制宽度吗？

Answer 1

如果要按预期使用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>

Answer 2

放在第一行的div是row类div的直接子元素。在Bootstrap 4中，此元素应包含列（col(-breakpoint)(-width)）类，第二行就是这种情况，第二行的按钮具有列类。

因此，未样式化的div破坏了row类和带有列类的按钮之间的关系，从而导致在小提琴中看到不希望的呈现。

因此，第二行是正确的实现。

为什么div没有班级限制宽度

2 个答案: