css - 调整浏览器窗口大小时，Bootstrap 列重叠

Question

我是 Bootstrap 的新手，我在处理的元素中遇到了一些样式问题。当我的窗口调整大小并变小时，我的列开始重叠。我该如何解决这个问题并使文本(在本例中为消息)始终与列的左侧对齐？

我在这里做错了什么？

我在这里制作了一个示例页面: https://www.bootply.com/JxB5m6qw8Z

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Chat</a>    
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav"></ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">User2 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="/users/edit">Settings</a></li>
            <li role="separator" class="divider"></li>
            <li><a rel="nofollow" data-method="delete" href="/users/sign_out">Logout</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


<div class="fluid-container" style="margin-top: 70px">
<div class="row">

  <div class="col-sm-2 sidebar-main">
    <div class="sidebar-items"> 
      <div class="sidebar-channels">
        <h4>Channels</h4>
        <ul>
          <div class="sidebar-listitem">
            <li># <a data-behavior="chatroom-link" data-chatroom-id="25" href="/chatrooms/25">General</a></li>
          </div>
        </ul>  
      </div>
      <div class="sidebar-users">
        <h4>Current Users</h4>
        <ul>
          <div class="sidebar-listitem">
            <li><a data-behavior="chatroom-link" data-chatroom-id="28" href="/direct_messages/6">User1</a></li>
          </div>
          <div class="sidebar-listitem">
            <li><a data-behavior="chatroom-link" href="/direct_messages/7">User3</a></li>
          </div>
        </ul>  
      </div>
    </div>
  </div>

  <div class="col-sm-10 col-sm-offset-2 body-main"> 
    <div class="room-name">
      <h2>General</h2>
    </div>
    <div class="message-window">    
      <div data-behavior='messages' data-chatroom-id='25' class="messages">
        <div><strong>User2: </strong> sd</div>
        <div><strong>User2: </strong> csd</div>
        <div><strong>User2: </strong> c</div>
        <div><strong>User2: </strong> sdc</div>
        <div><strong>User2: </strong> sd</div>
        <div><strong>User2: </strong> cs</div>
      </div>
      <div class="message-form">
        <form class="new_message" id="new_message" action="/chatrooms/25/messages" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="4NCGg4CJSb0jWbL+Xsx+FuNYTIUM/LD/el5IIuF3cRTHLXy9LzFAIUR+T5C8ATiJKeYdrbceMAeTc79E7OgLGg==" />
          <textarea rows="1" class="form-control" autofocus="autofocus" name="message[body]" id="message_body">
          </textarea>
        </form>
      </div>
    </div> 
  </div>
</div>
</div>

Answer 1

我很确定您的问题是使用 col-sm 不起作用，因为您的屏幕小于该列大小应容纳的大小。尝试使用 col-xs 代替。

更不用说，您曾一度使用 fluid-container 而不是 container-fluid。