按钮向下移动

Question

我得到下面的代码。当我调整浏览器窗口的大小时，按钮会在第二行显示。

如何将按钮保持在同一行上？

的index.html

<div class="row"> 
     <div class="col-md-7 col-md-offset-3"> 
... 
       <section> 
       <div class="row"> 
        <div class="col-sm-9"> 
        <ul class="nav nav-pills text-center"> 
         <li><a href>Description</a> 
         </li> 
         <li><a href>Specifications</a> 
         </li> 
         <li><a href>Reviews</a> 
         </li> 
        </ul> 
        </div> 

        <div class="col-sm-3"> 
        <button ng-show="product.canPurchase" class="btn btn-primary pull-right buy-btn">Add to Cart</button> 
        </div> 
       </div> 
       </section> 
    ... 
     </div> 
    </div> 

custom.css

@media all and (max-width:480px) { 
    .buy-btn { width: 100%; display:block; } 
} 

调整

之前

调整

后，这是我对最小窗口宽度（完全折叠）

Answer 1

你使用<div class="col-sm-9">和<div class="col-sm-3">

这意味着wh恩屏幕宽度小于768px这将打破对col-12的

改用<div class="col-xs-9">和<div class="col-xs-3">