导航栏上的Boostrap内联选项卡?

时间:2017-09-12 23:00:25

标签: html css twitter-bootstrap

我正在对codepen进行一些练习并尝试使用boostrap设置导航栏的样式,但是当我在网站上使用原始代码或添加

class="list-inline" 

结果是每行like this上的项目。

任何人都能解释为什么会这样吗?我正在使用boostrap 4,这是我的代码:

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">Brand</a>
   </div>
    <ul class="list-inline">
      <li><a href="#">Home</a></li>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
</nav>

2 个答案:

答案 0 :(得分:0)

你也必须使用list-inline-item类来处理li项目。

见下面的小提琴

https://jsfiddle.net/pr6t58wL/

int main(int argc, char *argv[])
{
    uint64_t    seed = UINT64_C(1);
    uint64_t    value;
    tinymt64_t  prng;
    char        dummy;

    if (argc > 1) {
        if (sscanf(argv[1], "%" SCNu64 " %c", &seed, &dummy) != 1) {
            fprintf(stderr, "%s: Not an unsigned 64-bit integer.\n", argv[1]);
            return EXIT_FAILURE;
        }
    }

答案 1 :(得分:-1)

请使用此代码我认为这是符合您要求的

在这里输入代码

<div id="exTab1" class="container">
  <ul class="nav nav-pills">
    <li class="active">
      <a href="#youridname1" data-toggle="tab">Overview</a>
    </li>
    <li><a href="#youridname2" data-toggle="tab">Using nav-pills</a>
    </li>
  </ul>

  <div class="tab-content clearfix">
    <div class="tab-pane active" id="youridname1">
      <h3>Content's background color is the same for the tab</h3>
    </div>
    <div class="tab-pane" id="youridname1">
      <h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
    </div>
  </div>
</div>