引导响应式导航。切换按钮位置

时间：2015-06-19 09:32:26

标签： twitter-bootstrap mobile responsive-design navigation

我正在开发一个响应式模板，我无法解决这个问题！ 所以....我的标题和导航在移动屏幕中已经像这样：

enter image description here

但我正在努力，因为导航的自然行为，正如您在桌面尺寸中看到的那样：

enter image description here

导航是灰色条，所以当我调整大小时，切换按钮会停留在灰色条上，我无法将其移动到那里!!!!!!!如果我作弊并使用绝对位置，那么我调整大小的每个像素都会移动。

这就是它在我看来的样子...... enter image description here

我试图以不同的方式构建它，但它似乎没有改变任何东西。是可能还是我尝试不可能？我试图在JSFiddle中创建它，但它看起来不像我的.... http://jsfiddle.net/h4rp4noq/。我知道我的CSS很乱，这是因为我使用了3个不同的文件作为边距和填充，颜色和字体以及其余部分，因为我告诉他这样做。我希望它不会让你头疼。

HTML 

<div id="navWrap"> 
  <header>
        <div class="mainContainer">
          <div id="logoWrap" class="img-responsive col-md-12 col-sm-12 col-xs-24">
            <img src="images/decorum_partA.png" alt=""/>
            <img class="hidden-sm hidden-xs" src="images/decorum_partB.png" alt=""/>
          </div>
          <div id="rightWrap" class="col-md-12 col-sm-12 col-xs-24">
            <div class="rightBox col-md-12 pull-right">
              <div class="col-md-24 blackBox">
                <span class="textInBox">SUBSCRIBE FOR OFFERS</span>
                <a href="#"><span class="icon-icn-sort_down iconHeader pull-right"></span></a>
              </div>
              <div class="col-md-24 col-sm-24 col-xs-24 greyBox">
                <span class="textInBox">020 8969 6581</span>
                <a href="#"><span class="icon-icn-phone2 iconHeader pull-right"></span></a>
              </div>
              <div class="col-md-24 col-sm-24 col-xs-24  greyBox">
                <span class="textInBox">CONTACT US</span>
                <a href="#"><span class="icon-icn-envelope iconHeader pull-right"></span></a>
              </div>
            </div>
          </div>
          <img id="logoOnlyBottles" class="img-responsive hidden-md visible-sm visible-xs clearfix" src="images/decorum_cheat.png" alt=""/>
        </div><!--closes main container-->
      </header> 
  <div class="naviContainer">
    <nav class="navbar navbar-default col-md-24">

      <div class="navigationWrap col-md-18 col-sm-18 col-xs-24">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="home.php">HOME</a></li>
            <li><a href="some_page1.php">OUR PHILOSOPHY</a></li>
            <li><a href="some_page2.php">OFFERS</a></li>
            <li><a href="#">FINE WINE</a></li>
            <li><a href="#">TOUR & TASTE</a></li>
            <li><a href="#">CONTACT</a></li>  
          </ul>
        </div><!--/.nav-collapse -->
      </div>
      <div id="searchOurWines" class="blackBox col-md-6 col-sm-6 col-xs-20 pull-right">
        <span id="textSearchBox" class="textInBox">SEARCH OUR WINES
          <span id="iconSearchBox">
            <span class="icon-icn-bottle"></span> 
          </span>        
        </span>
        <div class="arrowBoxes">
          <a href="">
            <span id="arrowSearch" class="icon-icn-sort_down"></span>  
            <span id="arrowSearch2" class="icon-icn-sort_up"></span>
          </a>  
        </div>
        <div class="clearfix"></div>
        <div id="browseContent">
          <div class="firstPartList col-md-12 col-sm-12 col-xs-12">
            <ul class="winesList ">
              <li>
                <a href="#" class="country">FRANCE</a>
                <ul class="area">
                  <li><a href="#">Bordeaux</a></li> 
                  <li><a href="#">Burgundy</a></li> 
                  <li><a href="#">Rhone</a></li>
                  <li><a href="#">Alsace</a></li> 
                  <li><a href="#">Champagne</a></li> 
                  <li><a href="#">South-West</a></li> 
                  <li><a href="#">Cote de Provence</a></li> 
                  <li><a href="#">Maconnais</a></li> 
                  <li><a href="#">Chalonais</a></li> 
                  <li><a href="#">Beaujolais</a></li> 
                  <li><a href="#">Loire</a></li> 
                </ul>
              </li> 
            </ul>     
          </div>
          <div class="secondPartList col-md-12 col-sm-12 col-xs-12">
            <ul class="winesList ">       
              <li>
                <a href="#" class="country">ITALY</a>
                <ul class="area">
                  <li><a href="#">Friuli-Venezia</a></li>
                  <li><a href="#">Piedmonte</a></li>   
                  <li><a href="#">Sicily</a></li>   
                  <li><a href="#">Toscana</a></li>  
                  <li><a href="#">Veneto</a></li>  
                </ul>
              </li>
              <li>
                <a href="#" class="country">GERMANY</a>          
              </li>    
              <li>
                <a href="#" class="country">SPAIN</a>          
              </li>    
              <li>
                <a href="#" class="country">NEW WORLD</a>          
              </li>    
            </ul> 
          </div>
          <div class="clearfix"></div>
          <div id="specificSearch" class="col-md-24 col-sm-24 col-xs-24">
            <span>SEARCH SPECIFIC</span>
            <form id="searchSpecificBox" role="search">
              <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
              <a href=""><span class="icon-icn-search"></span></a>
            </form>
          </div>       
        </div>
      </div>
    </nav>
  </div>
  <div class="clearfix">

    

CSS 

.mainContainer{
    margin-left:7%;
    margin-right:7%;
    padding-bottom:1%;
    overflow:hidden; 
}
.bigContainer{
    margin-left:7%;
    margin-right:7%;  
}

/*Header*/
header{
    background-color:#585077;
}
#logoWrap{
    padding:0;
}
#logoWrap img{
    display:block; 
}
.clearfix{
    clear:both;
}

#rightWrap{
    padding:0;
}
.rightBox{
    margin-top:5%;
    padding:0;
}
#rightWrapSmall{
    z-index:99;
}
.blackBox, .greyBox{
    padding:0;
    line-height:1.8;
}
.blackBox span.iconHeader{
    padding:1.5%;
    position: absolute;
    right: 0;
}
.greyBox span.iconHeader{
    padding:1.2%;
}
.greyBox{
    margin-top: 0.5%;
}
.iconHeader{
    vertical-align: middle;
}
.textInBox{
    padding-left: 5%;
    padding-right: 10%;
}

/*Navigation bar*/
#navbar{
    padding:0;
}
.navbar{
    border-radius:0;
    min-height:40px;
}
.navbar.navbar-default{
    border:0;
    margin:0;
    padding:0;
}
.navbar-default .navbar-nav > li > a{
    color:#e0e0e0;

}
.navbar-nav > li > a {
    padding-top:10px;
    padding-bottom:11px;
}
#navWrap{
    background-color:#808080;
}
#arrowSearch2{
    display:none;
}
.navigationWrap{
    padding:0;
}
.naviContainer{
    margin-left:7%;
    margin-right:7%;
}

/*search o wines*/
#iconSearchBox span.icon-icn-bottle{
    position:absolute;
    right:12%;
    margin-top: 4px;
}
#iconSearchBox span.icon-icn-sort_down, #iconSearchBox span.icon-icn-sort_up{
    position:absolute;
    right: 2%;
    top: 25%;
}
#searchOurWines{
    line-height: 1.8;
    margin-top: 2px;
margin-bottom: 2px;
}
.arrowBoxes{
display: inline;
float: right;
padding-right: 2%;
border-left: 1px solid white;
padding-left: 2%;
margin-top: 1px;
}
.arrowBoxes a{
    color:white;
    font-size:1.2em;
    text-decoration:none;
}
/*Inside search wine box*/
#browseContent{
    display:none;
    position: absolute;
    z-index: 999;
    width: 100%;
}
.winesList{
    height:100%;
    line-height: 1.5;
    list-style:none; 
    margin-top:10%;
    margin-bottom:15%;
    padding:1%;
}
.winesList ul{
    list-style:none;
}
a.country{
    text-transform: uppercase;
    text-decoration:none;
}
a.country:hover{
    color:#585077;
}
.area a{
    text-transform: capitalize;
    text-decoration:none;
}
ul.area{
    padding-left:0;
}
#specificSearch{
    padding:0 2%;
}
#specificSearch span{
    vertical-align:middle;
}
#searchSpecificBox{
    width: 48%;
    display: inline-block;
    margin-left:2%;
    margin-top: 2%;
    margin-bottom: 2%;
}
#searchSpecificBox input[type="text"]{
    position:relative; 
}
#searchSpecificBox a .icon-icn-search{
    line-height:1.5;
    position: absolute;
    right: 3%;
    top: 15%;
}
#searchSpecificBox .form-control{
    display:inline;
}
header{
    background-color:#585077;
}
.blackBox{
    background-color:#000;
    color:#e0e0e0;
} 
.greyBox{
    background-color:#ffffff;
    color:grey;
}
.blackBox span.iconHeader{
    font-size:1.2em; 
    color:#fff;
}
.greyBox span.iconHeader{
    font-size:1.3em;
    background-color:#fff;
    color:black;
}
/*Navigation bar*/
.navbar.navbar-default{
    background:#808080;
}
.navbar-default .navbar-nav > li > a{
    color:#e0e0e0;
}
#navWrap{
    background-color:#808080;
}
.navbar-toggle {
    background-color:white;
}

/*search our wines*/
#textSearchBox, #iconSearchBox span{
    color:#e0e0e0;
}
#textSearchBox{
      line-height: 2.3;
}
#iconSearchBox span.icon-icn-bottle{
    background-color:black;
    font-size:1.8em;
}
#iconSearchBox span.icon-icn-sort_down, #iconSearchBox span.icon-icn-sort_up{
    font-size:1.2em;
}
/*Inside search wine box*/
#browseContent{
    background-color:#fff;
}
.firstPartList{
    border-right:1px solid #cccccc;
}
a.country{
    color:#585077;
    font-size:22px;
    font-weight: bold; 
}
a.country:hover{
    color:#585077;
}
.area a{
    color:#a1a1a1;
    font-weight: normal;
}
.area a:hover{
    font-weight: bold;
}
#specificSearch{
    background-color:#564e73;
    color:#e0e0e0;
}
#specificSearch span{
    font-size:22px;
}
#searchSpecificBox a .icon-icn-search{
    color:black;
    font-weight:bold;
    font-size:1.8em;
}

所有的帮助将是欣赏它!!

谢谢

1 个答案:

答案 0 :(得分：1)

以下是更新的js fiddle 

 $(document).ready(function() {
        $('#arrowSearch').click(function() {
                  $('#browseContent').toggle();
                  $('#arrowSearch').css("display", "none");
                  $('#arrowSearch2').css("display", "inline");
                  return false;
              });
              $('#arrowSearch2').click(function () {
                  $('#browseContent').toggle();
                  $('#arrowSearch2').css("display", "none");
                  $('#arrowSearch').css("display", "inline");
                  return false;
              });
          });
相关问题
最新问题