如何在Bootsrap中使用多个列而不从列1开始？

Question

我在页面上有两个按钮。根据W3Schools，页面分为12列。我希望两个按钮的宽度为4列，但从2列到5列，而第二个按钮在8列到11列。我该怎么做？我正在使用引导程序来执行此操作。

使用空的'p'元素似乎不起作用，如下所示。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="row container fluid">
  <p class="col-sm-2"></p>
  <input type="button" id="cancel" name="cancel" value="Cancel" onclick="cancel();" class="col-sm-3">
  <p class="col-sm-2"></p>
  <input type="button" id="registerX" class="col-sm-3" name="registerX" value="Register" onclick="submitCheck();">
  <p class="col-sm-2"></p> <br />
</div>

我注意到第二个按钮之后的间隙比第一个间隙大。我该怎么办？

编辑：要查看它，请在整页中打开代码。

Answer 1

尝试一下：

<div class="row container fluid">
  <div class="col-sm-4 offset-sm-1">
    <input class="btn btn-primary btn-block" type="button" name="cancel" value="Cancel">
  </div>
  <div class="col-sm-4 offset-sm-2">
    <input class="btn btn-primary btn-block" type="button" name="registerX" value="Register" >  
  </div>
</div>

您可以使用col-sm-4类将列的宽度设置为4。您可以使用offset-sm-X来移动它们，其中X是您要移动的位置数。

如果您希望按钮占据刚创建的列的全部宽度，则将btn-block类传递给它们。

示例：https://jsfiddle.net/jkrielaars/cno6qhbx/5/

Answer 2

引导程序为此具有offset个帮助程序类

https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

.col-sm-4 {
  border: 1px solid red;
}

.container {
  border: 1px solid blue;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container fluid">
  <div class="row">
    <div class="col-sm-4 offset-md-1">
      <input type="button" id="cancel" name="cancel" value="Cancel" onclick="cancel();">
    </div>
    <div class="col-sm-4 offset-md-1">
      <input type="button" id="registerX" name="registerX" value="Register" onclick="submitCheck();">
    </div>
  </div>
</div>

Answer 3

您必须在容器或容器流体内部使用类行因为容器和容器流体的左右边距是自动的但行类使用负边距，因此容器本身向左对齐而不是居中]

<div class="container fluid">
<div class="row">
  <div class="col-sm-1"></div>
  <div class="col-sm-4">
    <input type="button" id="cancel" name="cancel" value="Cancel" onclick="cancel();">
  </div>  
  <div class="col-sm-2"></div>
  <div class="col-sm-4">
    <input type="button" id="registerX" name="registerX" value="Register" onclick="submitCheck();">
  </div>
  <div class="col-sm-1"></div>
</div>
</div>

Answer 4

使用偏移

<div class="row container fluid">
  <p class="offset-sm-1"></p>
  <div class="col-sm-3">
     <button type="button" id="cancel" name="cancel" value="Cancel" onclick="cancel();">
  </div>
  <p class="col-sm-2"></p>
  <div class="col-sm-4">
     <button type="button" id="registerX" class="col-sm-3" name="registerX" value="Register" onclick="submitCheck();">
  </div>
</div>

offset-sm-1将保留一个空白区域，该区域为1列大小，以便您的内容从第2列开始。