按鈕向下移動

我得到下面的代碼。當我調整瀏覽器窗口的大小時，按鈕會在第二行顯示。按鈕向下移動

如何將按鈕保持在同一行上？

的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; } 
}

調整

之前

調整

後，這是我對最小窗口寬度（完全摺疊）

來源

2015-10-06 kirqe

您使用的引導？ – j08691

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

這意味着wh恩屏幕寬度小於768px這將打破對col-12的

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

來源

2015-10-06 14:25:48 stackoverfloweth

謝謝，但在這種情況下，當窗口摺疊時，按鈕不像上一屏截圖那樣佔用全部寬度。 – kirqe

好吧，它可能是全寬，但作爲一個col-3它只有25％的行 – stackoverfloweth

按鈕向下移動

回答

相關問題