html - 如何在一行中制作导航标签和按钮？

Question

像这样，bootstrap 3:

|  tab1 |  tab2  |  tab3 |                                    button


<div class="row">
  <ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
  </ul>  
  <div class="btn-group pull-right">
    <button class="btn btn-default navbar-btn pull-right" >123</button>
  </div>
</div>

Answer 1

如果您想将多个元素放在一行中，您可以使用 Bootstrap 网格系统。详情见:http://getbootstrap.com/examples/grid/

您的代码可能如下所示:

<div class="row">
    <div class="col-xs-8">
        <ul class="nav nav-tabs">
            <li role="presentation" class="active"><a href="#">Home</a>
            </li>
            <li role="presentation"><a href="#">Profile</a>
            </li>
            <li role="presentation"><a href="#">Messages</a>
            </li>
        </ul>
    </div>
    <div class="col-xs-4">
        <div class="btn-group pull-right">
            <button class="btn btn-default navbar-btn pull-right">123</button>
        </div>
    </div>
</div>

有关工作示例，请参见此处:https://jsfiddle.net/qmjmtx27/1/