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">

这意味着当屏幕宽度小于768px时，它将突破到col-12＆＃39>

而是使用<div class="col-xs-9">和<div class="col-xs-3">

按钮向下移动

1 个答案: