Question

我想将引导导航栏限制为this code中的一行。当屏幕调整大小（特别是1465px）时，引导程序导航栏将自身扩展为两行。为了将导航栏限制为一行，我希望在屏幕宽度缩小时使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>

将Bootstrap Navbar限制为一行

1 个答案: