Question

由于某些原因，在bootstrap中，我遇到了两个问题：

1）我的“Home，INdex，Bold ......”的内容没有显示出来。 2）我希望“Home，Index，Bold”的内容与“Logo Here”在同一行显示。

我的代码和css：

<nav class="dt qf py tu eu app-navbar">
  <div class="e">
    <div class="pv">

      <a class="l" href="../">
        <span>Logo Here</span>
      </a>
    </div>
    <div class="pw collapse" id="navbar-collapse">
      <ul class="nav navbar-nav pk">
        <li>
          <a href="..//index.html">Home</a>
        </li>
        <li class="active">
          <a href="../minimal/index.html">Index</a>
        </li>
        <li>
          <a href="../bold/index.html">Bold</a>
        </li>
        <li>
          <a href="../docs/index.html">Docs</a>
        <li>
          <a href="../docs/index.html">Mre Docs</a>
        </li></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

CSS：

@media (min-width: 979px) {

  #midCol.affix-top {
      position:fixed;
      width:265px;
      margin-right:10px;

  }

  #midCol.affix {
      position:static;
      width:100%;
  }

}

@media (min-width: 767px) {
  .affix,.affix-top {
      position:fixed;
  }
}


    @media (min-width: 768px)
.pw {
    width: auto;
    border-top: 0;
    box-shadow: none;
}

    @media (min-width: 768px)
.pk {
    float: right !important;
    margin-right: -10px;
}

.e {
    margin-right: auto;
    margin-left: auto;
    padding-left: 10px;
    padding-right: 10px;
}

.pz {
    position: relative;
    float: right;
    margin-right: 10px;
    padding: 9px 10px;
    margin-top: 8px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}    

    .l {
    float: left;
    padding: 14px 10px;
    font-size: 18px;
    line-height: 22px;
    height: 50px;
}

    .app-navbar {
    font-size: 13px;
    letter-spacing: .15em;
            padding-top: 20px;
    padding-bottom: 20px;
            background-color: #ffffff;
    border-color: transparent;
}


*:before, *:after {
    box-sizing: border-box;
}

    @media (min-width: 768px)
.pz {
    display: none;
}

    element.style {
}
.qf .pz {
    border-color: transparent;
}
.p-x-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
button, select {
    text-transform: none;
}
button {
    overflow: visible;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}
* {
    box-sizing: border-box;
}
.app-navbar {
    font-size: 13px;
    letter-spacing: .15em;
}
.eu {
    text-transform: uppercase;
}

    .navbar-nav {
        margin:0;
            float: right !important;
    margin-right: -10px;
    }

    li {
    display: list-item;
    text-align: -webkit-match-parent;
            list-style: none;
}

    .pw {
        width: auto;
    border-top: 0;
    box-shadow: none;
    }    
@media (min-width: 768px)
.pw.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}

Answer 1

请查看代码段。它是HTML和CSS的副本。我只在其中添加了以下内容：

<view
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    class="blink">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Some text" />
</view>

您可以将li{ display:inline-block; }更改为您的特定选择器。

li

@media (min-width: 979px) {

  #midCol.affix-top {
      position:fixed;
      width:265px;
      margin-right:10px;

  }

  #midCol.affix {
      position:static;
      width:100%;
  }

}

@media (min-width: 767px) {
  .affix,.affix-top {
      position:fixed;
  }
}


    @media (min-width: 768px)
.pw {
    width: auto;
    border-top: 0;
    box-shadow: none;
}

    @media (min-width: 768px)
.pk {
    float: right !important;
    margin-right: -10px;
}

.e {
    margin-right: auto;
    margin-left: auto;
    padding-left: 10px;
    padding-right: 10px;
}

.pz {
    position: relative;
    float: right;
    margin-right: 10px;
    padding: 9px 10px;
    margin-top: 8px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}    

    .l {
    float: left;
    padding: 14px 10px;
    font-size: 18px;
    line-height: 22px;
    height: 50px;
}

    .app-navbar {
    font-size: 13px;
    letter-spacing: .15em;
            padding-top: 20px;
    padding-bottom: 20px;
            background-color: #ffffff;
    border-color: transparent;
}


*:before, *:after {
    box-sizing: border-box;
}

    @media (min-width: 768px)
.pz {
    display: none;
}

    element.style {
}
.qf .pz {
    border-color: transparent;
}
.p-x-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
button, select {
    text-transform: none;
}
button {
    overflow: visible;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}
* {
    box-sizing: border-box;
}
.app-navbar {
    font-size: 13px;
    letter-spacing: .15em;
}
.eu {
    text-transform: uppercase;
}

    .navbar-nav {
        margin:0;
            float: right !important;
    margin-right: -10px;
    }

    li {
    display: list-item;
    text-align: -webkit-match-parent;
            list-style: none;
}
li{
display:inline-block;
}
    .pw {
        width: auto;
    border-top: 0;
    box-shadow: none;
    }    
@media (min-width: 768px)
.pw.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}

Answer 2

如果您的链接没有显示，也有机会，您可以使用崩溃类，而不是在id为id =＆＃34的div处崩溃; navbar-collapse＆＃34;

如何让导航栏元素在bootstrap 3中显示内联？

2 个答案: