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>