Bootstrap：网格系统中的响应按钮？

Question

这是我想在宽屏幕上做的事情：

，其中按钮位于右侧并位于一行中。

那些应该位于小屏幕中，如下所示：

，其中按钮在每行中分开

我认为我可以使用bootstrap网格系统实现这一点，但有点难以实现。

以下是我的尝试：

<div class="row">
    <div class="col-sm-offset-8 col-sm-2">
        <a href="#" id="cancel-btn" class="btn btn-primary"  style=" margin-right:5px; background-color:#313131; border-color:#313131;"> 주문 취소 </a>
    </div>
    <div class="col-sm-offset-10 col-sm-2">
        <a href="#" id="edit-btn" class="btn btn-primary" type="submit" style=" margin-left:5px;"> 주문 수정 </a>
    </div>
</div>

但是不起作用。需要帮助。感谢。

Answer 1

我不明白你想要什么，但我猜到了你想要的东西。 你想这样表现吗？

你可以在这里看到 an example

Answer 2

您需要将更改col-sm-2类添加到 col-sm-12 （将在小屏幕上扩展） 并添加类 col-lg-2 还设置偏移到lg屏幕

<div class="row">
    <div class="col-lg-offset-8 col-sm-12 col-lg-2">
        <a href="#" id="cancel-btn" class="btn btn-primary"  style=" margin-right:5px; background-color:#313131; border-color:#313131;"> 주문 취소 </a>
    </div>
    <div class="col-sm-12 col-lg-2">
        <a href="#" id="edit-btn" class="btn btn-primary" type="submit" style=" margin-left:5px;"> 주문 수정 </a>
    </div>
</div>