html - 当宽度低于 768px 时，如何防止 Bootstrap 折叠到移动 View 中？

Question

我正在使用 Bootstrap 3。我希望防止 Bootstrap 在宽度低于 768 像素时更改页面样式。原因是 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 .转到 customizer's breakpoints section并将 @screen-sm 变量设置为较低的值，例如 650px。