javascript - 如何在 Bootstrap 中使用多列而不是从第 1 列开始？

Question

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

使用空的“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

留下答案而不是评论，因为我没有足够的声誉。只是想指出OP使用的是 Bootstrap 3，而不是4，因此偏移量将写为“col-sm-offset-1”，而不是“offset-sm-1”。

<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">
    <div class="col-sm-4 col-sm-offset-1">
        <button type="button" class="btn btn-primary btn-block" id="cancel" name="cancel" value="Cancel" onclick="cancel();">Primary</button>
    </div>
    <div class="col-sm-4 col-sm-offset-2">
        <button type="button" class="btn btn-primary btn-block" id="registerX" name="registerX" value="Register" onclick="submitCheck();">Primary</button>
    </div>
</div>