html - 将 Bootstrap 导航栏限制在一行

Question

我想将 Bootstrap 导航栏限制在 this code 中的一行.当屏幕调整大小时(特别是 1465 像素)， Bootstrap 导航栏将自身扩展为两行。为了将导航栏限制为一行，我想在屏幕宽度缩小时使 btn-group 变小。如何动态更改如下所示的消息按钮组的大小？

  <form class="navbar-form navbar-left">
    <div class="btn-group">
      <a href="/Message" class="btn btn-default pull-left truncate-message" id="message-button-group">
        <span class="badge pull-left" style="margin-right: 10px;">5</span> Subject5: Message4
      </a>
      <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width:40px" id="dropdown-button">
        <span class="glyphicon glyphicon-chevron-down"></span>
      </a>
      <ul class="dropdown-menu truncate-message" role="menu">
        <li>
          <a href="/Message">Subject4: Message3</a>
        </li>
        <li>
          <a href="/Message">Subject3: Message2</a>
        </li>
        <li>
          <a href="/Message">Subject2: Message1</a>
        </li>
        <li>
          <a href="/Message">Subject1: Message0</a>
        </li>
      </ul>
    </div>
  </form>

预先感谢您的帮助。

Answer 1

一个想法 (Bootstrap 3) 是创建四个具有不同宽度的类并利用 Bootstrap 的可见响应类:

  <a href="/Message" class="btn btn-default pull-left truncate-message width-1 visible-xs" id="message-button-group">
    <span class="badge pull-left" style="margin-right: 10px;">5</span> Subject5: Message4
  </a>

  <a href="/Message" class="btn btn-default pull-left truncate-message width-2 visible-sm" id="message-button-group">
    <span class="badge pull-left" style="margin-right: 10px;">5</span> Subject5: Message4
  </a>

  <a href="/Message" class="btn btn-default pull-left truncate-message width-3 visible-md" id="message-button-group">
    <span class="badge pull-left" style="margin-right: 10px;">5</span> Subject5: Message4
  </a>

  <a href="/Message" class="btn btn-default pull-left truncate-message width-4 visible-lg" id="message-button-group">
    <span class="badge pull-left" style="margin-right: 10px;">5</span> Subject5: Message4
  </a>