1

我正在使用 twitter bootstrap 构建我的网站。我想专门针对智能手机和平板设备的网站。对于智能手机和 ipad（纵向模式）设备，导航栏完全崩溃了。对于更高分辨率的设备，例如 ipad 横向模式和大型桌面，我需要相同的折叠导航栏。

在 bootstrap-responsive.css 文件中，如果我可以将最大宽度从 979 像素提高到更高的分辨率，例如 1024 像素和 1200 像素，它确实有效。这是一个正确的方法吗？

导航栏片段

    <div class="navbar navbar-fixed-top navbar-absolute">
      <div class="navbar-inner">
        <div class="container" style="width: auto;">
          <a class="btn btn-navbar custom-collapse-btn" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="http://www.test.com/" target="_blank"><img src="img/logo.png" border="0" /></a>
          <div class="pull-right icon-custom-search"></div>
          <div class="nav-collapse">
            <ul class="nav">          
              <li>
                <ul class="nav" id="nav-menu-left">
                  <li><a href="#">LMenu1</a></li>
                  <li><a href="#">LMenu2</a></li>
                  <li><a href="#">LMenu3</a></li>
                  <li><a href="#">LMenu4</a></li>
                  <li><a href="#">LMenu5</a></li>
                  <li><a href="#">LMenu6</a></li>
                </ul>
              </li>
              <li>
                <ul class="nav" id="nav-menu-right">
                  <li><a href="#"><img src="img/icon-newsletter.png" border="0" /> Rmenu1</a></li>
                  <li><a href="#"><img src="img/icon-register-login.png" border="0" /> Rmenu2</a></li>
                  <li><a href="#"><img src="img/icon-download-app.png" border="0" /> RMenu3</a></li>
                </ul>
              </li>
              <div id="nav-copyright-text"><a href="#">This is test text/a></div>          
            </ul>
          </div><!-- /.nav-collapse -->
        </div>
      </div><!

-- /navbar-inner -->
</div>

导航栏自定义 CSS

.navbar-inner {
    background-color: #13417c !important; 
    background-image: none;
    background-repeat: no-repeat;
    filter: none;
    padding:0 !important;
    border: 1px solid #000000;
}

.navbar .btn-navbar {
    padding:15px 10px;
    margin-right:0;

}
.navbar .btn {
    margin-top:0;
    margin-left:0;
}
.navbar-inner .btn-navbar {
    background: black;
}

.navbar .btn-navbar:hover {
    background: black;
    color:black;    
}

.navbar .btn-navbar:focus, .navbar .btn-navbar:active {
    background: black;
    color:black;    
}

#rotate    {  
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    /* filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5); */
    -ms-transform:rotate(90deg);

}

.icon-custom-search {
    color: #fffafe;
    background: url('../img/search_bg.png') no-repeat;
    height: 43px;
    padding-left: 46px;
}

.custom-collapse-btn {
    border-radius: 0 !important;
    -webkit-border-radius:0 !important;
    -moz-border-radius:0 !important;
}

.nav-collapse.collapse {
    background-color: #000000;
}

.navbar .nav > li {
    line-height: 16px;
}

.nav-collapse .nav > li > a:hover {
    background-color:#000000;
}
.nav-collapse .nav > li > a {
    text-shadow:none;
}

#nav-menu-left {
    width:49%;
    float:left;
    border-right: 1px solid #808080;
    margin-top: 20px;
}

#nav-menu-right {
    width:50%;
    float:left;
    margin-top: 20px;
}

#nav-menu-left > li > a {
    color: #ffffff;
}

#nav-menu-right > li > a {
    color:#85b3e5;
    font-weight: normal;
}

#nav-menu-right > li > a > img {
    padding-right:10px;
}

#nav-copyright-text {
    clear:both;
}
#nav-copyright-text a {
    color: #666666;
    font-weight: bold;
    padding: 10px;
}

#nav-copyright-text {
    text-align: center; 
}

#nav-copyright-text a:hover{
    text-align: center;
    text-decoration: none;
}
4

1 回答 1

2

编辑核心文件是个坏主意。坚持使用媒体查询并完成您的任务。

<link rel='stylesheet' media='screen and (min-width: 979px) and (max-width: 1024px)' href='css/medium.css' />

并更有效地完成您的任务。

于 2013-05-02T06:01:57.423 回答