Html 两个并排的引导按钮

我想有一个提交和取消按钮，两个按钮之间可能有5个像素。 我写了这个，你可以在实时代码中看到：

---

但是两个按钮之间的距离很大！我希望他们彼此更接近。我确实尝试过在提交按钮上设置

右侧填充

或

右侧空白

，但什么也没做

这是因为你给出了col-xs-4，这就是为什么两个按钮占用了4列空间

选项1: 这是你的答案

            <div class="col-xs-1">
                <button id="submit" name="button" value="register" class="btn btn-primary">Submit</button>
            </div>

            <div class="col-xs-1">
                <button id="cancel" name="button" value="cancel" class="btn btn-secondary">Cancel</button>
            </div>

        </div>

提交
取消

备选案文2： 将两个按钮相邻放置

<div class="row">

                <div class="col-xs-4">
                    <button id="submit" name="button" value="register" class="btn btn-primary">Submit</button>
                  <button id="cancel" name="button" value="cancel" class="btn btn-secondary">Cancel</button>
                </div>
            </div>

提交
取消

这是因为您给出了col-xs-4，所以两个按钮占用了4列空间

选项1: 这是你的答案

            <div class="col-xs-1">
                <button id="submit" name="button" value="register" class="btn btn-primary">Submit</button>
            </div>

            <div class="col-xs-1">
                <button id="cancel" name="button" value="cancel" class="btn btn-secondary">Cancel</button>
            </div>

        </div>

提交
取消

备选案文2： 将两个按钮相邻放置

<div class="row">

                <div class="col-xs-4">
                    <button id="submit" name="button" value="register" class="btn btn-primary">Submit</button>
                  <button id="cancel" name="button" value="cancel" class="btn btn-secondary">Cancel</button>
                </div>
            </div>

提交
取消

您不必将它们放在单独的列中，只需让它们彼此相邻，如下所示：

            <div class="row">

            <div class="col-xs-4">
                <button id="submit" name="button" value="register" class="btn btn-primary">Submit</button>
              <button id="cancel" name="button" value="cancel" class="btn btn-secondary">Cancel</button>
            </div>


        </div>

提交
取消

您不必将它们放在单独的列中，只需让它们彼此相邻，如下所示：

            <div class="row">

            <div class="col-xs-4">
                <button id="submit" name="button" value="register" class="btn btn-primary">Submit</button>
              <button id="cancel" name="button" value="cancel" class="btn btn-secondary">Cancel</button>
            </div>


        </div>

提交
取消

您可以使用引导类按钮组执行此操作

<div class="button-group ">                
                 <button id="submit" name="button" value="register" class="btn btn-primary">Submit</button>               
                <button id="cancel" name="button" value="cancel" class="btn btn-secondary">Cancel</button>           
 </div>

提交
取消

您可以使用引导类按钮组执行此操作

<div class="button-group ">                
                 <button id="submit" name="button" value="register" class="btn btn-primary">Submit</button>               
                <button id="cancel" name="button" value="cancel" class="btn btn-secondary">Cancel</button>           
 </div>

提交
取消

如果您希望两个按钮尽可能相邻，我使用以下方法：

.清楚{
明确：两者皆有；
}
取消
提交

如果你想得到你在问题中提到的5px距离，只需删除

左拉
类即可

如果您希望两个按钮尽可能相邻，我使用以下方法：


.清楚{
明确：两者皆有；
}
取消
提交


如果你想得到你在问题中提到的5px距离，只需删除
左拉
类即可

在您的问题中，您还在示例中创建了两列。你为什么这么做？你期望会发生什么？在你的问题中，你在你的例子中创建了两列。你为什么这么做？你期望会发生什么？