當寬度小於768像素時，如何防止Bootstrap塌陷到移動視圖中？

Question

我正在使用Bootstrap3。當寬度低於768px時，我希望防止Bootstrap更改頁面的樣式。 原因是Bootstrap會將div行堆疊在一起，我不希望這樣。

這是我所做的：

@media (max-width : 768px)  {
  .container {
    width: 800px;
  }
}

它成功地將容器的寬度設置為800px，但是並沒有阻止容器的樣式更改（即元素仍在堆疊中）。

HTML：

<div class="container">
  <div class="clearfix inbox-panel row">
    <div class="convo-panel col-md-5 col-sm-5 col-xs-5">

      <div class="clearfix panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading">
          <ul class="nav nav-tabs nav-justified">
            <li role="presentation" class="active"><a href="#">Inbox</a></li>
            <li role="presentation"><a href="#">Sent</a></li>
          </ul>
        </div>

        <!-- List group -->
        <ul class="convo-list list-group">
          <div class="push"></div>  
        </ul>
        <div class="convo-footer">
          <div class="convo-features">
            <div class="btn-group btn-group-justified" role="group" aria-label="...">
              <div class="btn-group" role="group">
                <button type="button" class="edit-convo-button btn btn-default">Edit</button>
              </div>
              <div class="btn-group" role="group">
                <button type="button" class="mark-all-read-button btn btn-default">Mark all as read</button>
              </div>
            </div>
          </div>
          <div class="convo-options">
            <div class="btn-group btn-group-justified" role="group" aria-label="...">
              <div class="btn-group" role="group">

                <button type="button" class="mark-read-button btn btn-default">
                  <span class="glyphicon glyphicon-ok"></span>
                  Mark as read
                </button>
              </div>
              <div class="btn-group" role="group">
                <button type="button" class="delete-convo-button btn btn-default">
                  <span class="glyphicon glyphicon-trash"></span>
                  Delete
                </button>
              </div>
              <div class="btn-group" role="group">
                <button type="button" class="cancel-button btn btn-default">
                  <span class="glyphicon glyphicon-remove"></span>
                  Cancel
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="clearfix chat-panel col-md-7 col-sm-7">
      <div class="clearfix chat-header row">
        <div class="sender-chat-photo col-lg-1 col-md-1 col-xs-2">
          <img class="img-circle" src="/images/no_photo_thumb.png">
          <div class="online-indicator"></div>
        </div>
        <div class="sender-chat-info col-lg-8 col-md-7 col-xs-5">
          <p class="truncate list-group-item-heading sender-name">
            <span class="vip-label label label-default"></span>
          </p>
          <p class="truncate small list-group-item-text sender-location"></p>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-5">
          <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Options </span>
            </button>
            <ul class="dropdown-menu">
              <li><a href="#">Block user</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Report user</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Delete conversation</a></li>
            </ul>
          </div>
          <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-trash"></span>
          </button>
        </div>
      </div>
      <div class="clearfix chat-box">
      </div>
      <div class="clearfix chat-input-panel">
        <div class="clearfix row">
          <div class="chat-input-form col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 form-group">
            <textarea class="form-control" rows="4" id="chat-input" placeholder="Type your message here..."><%= current_user.token %></textarea>
            <button type="button" class="chat-input-button btn btn-default">Send</button>
            <div id="clear" style="clear:both;"></div>
          </div>
        </div> 

      </div>
    </div>
  </div>
</div>

<script src="/socket.io/socket.io.js"></script> 
<script src="/javascripts/jquery-1.11.1.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="/javascripts/chat.js"></script> 
<script>
  startChat('<%= current_user.token %>');
</script>

Answer 1

您將使用嘗試的方法永遠追逐自己的尾巴。 假設您沒有使用SASS或LESS，您可以在生成Bootstrap CSS之前在其中設置變量，請嘗試使用Bootstrap Customizer 。 轉到定制器的斷點部分 ，並將@screen-sm變量設置為一個較低的值，例如650px 。