Question

我想在所有设备中显示像web.its一样适用于中型设备但不适用于手机和平板电脑。请建议我......

<header id="page-header">
<div class="container">
    <div class="row">
    <div class="col-xs-6">
    <nav >
        <ul class="nav nav-pills">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">service</a></li>
            <li><a href="#">career</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    </div>
    </div>
</div>
</header>

这是我的css代码

#page-header{
    background-color:grey;
    text-transform: uppercase;
}
.nav-pills > li > a {
    color: #000 !important;
    direction: inline-block;
}
.nav-pills > li > a.active {
    background-color: #000;
}
.nav-pills > li.active >a{
    color: #fff !important;
    background-color: #000;
    border-radius: 10px;
}

Answer 1

要获得所有这一行，您可以执行以下操作（修改当前代码）

.nav-pills {
  display: flex;
}
.nav-pills > li {
  justify-content: space-between;
}
.nav-pills > li > a {
    color: #000 !important;
}

但我不会建议这种方法适用于手机。

Answer 2

首先＆＃34; col-xs-6＆＃34;是超小型设备的类，这就是为什么你需要添加这个类＆＃34; col-xs-12 col-sm-6＆＃34;这样你就可以在移动设备上获得全宽。请参阅此图片以了解。

现在，您希望在所有设备的一行中显示导航项，因此您需要为自定义css添加媒体查询。请参阅代码段。

＆＃13;

#page-header{
    background-color:grey;
    text-transform: uppercase;
}
.nav-pills > li > a {
    color: #000 !important;
    direction: inline-block;
}
.nav-pills > li > a.active {
    background-color: #000;
}
.nav-pills > li.active >a{
    color: #fff !important;
    background-color: #000;
    border-radius: 10px;
}

@media (max-width: 480px){ 
  .nav>li>a{
    padding: 5px 5px;
    font-size: 10px;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<header id="page-header">
<div class="container">
    <div class="row">
    <div class="col-xs-12 col-sm-6">
    <nav >
        <ul class="nav nav-pills">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">service</a></li>
            <li><a href="#">career</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    </div>
    </div>
</div>
</header>

＆＃13;

如何在引导程序中为所有设备显示一行中的nav-items？

2 个答案: