在一個導航欄中爲所有屏幕大小設置第二個div在第一個以下

Question

我在一個導航欄中有一個帶有2個div的頁面。當屏幕尺寸寬度超過1024像素時，該頁面中的所有內容看起來都是我想要的。但是一旦我將寬度減小到小於768，2格就會與第一格合併，並將其顯示爲一行而不是原來的2.我希望在屏幕尺寸減小時它仍然位於兩條不同的行中

$(document).ready(function() { 
 
    var navpos = $('#product-nav').offset(); 
 
    console.log(navpos.top) 
 
    $(window).bind('scroll', function() { 
 
    if ($(window).scrollTop() > navpos.top) { 
 
     $('#product-nav').addClass('fixed'); 
 
    } else { 
 
     $('#product-nav').removeClass('fixed'); 
 
    } 
 
    }); 
 
});

.mc-navbar { 
 
    font-size: 17px; 
 
    background-color: #f8f8f8; 
 
    border-color: #ffffff; 
 
    margin-bottom: 0; 
 
} 
 
.navbar-default .mc-navbar-brand { 
 
    color: #3c6190; 
 
} 
 
.navbar-default .mc-navbar-brand:focus, 
 
.navbar-default .mc-navbar-brand:hover { 
 
    color: #3c6190; 
 
} 
 
.mc-navbar-right { 
 
    font-size: 16px; 
 
    margin-right: 0; 
 
} 
 
.mc-partner-nav { 
 
    background-color: #FFFFFF; 
 
} 
 
.mc-partner { 
 
    margin-right: 20px; 
 
    text-align: right; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-weight: 300; 
 
    line-height: 30px; 
 
    font-style: italic; 
 
    font-size: 18px; 
 
} 
 
#logo { 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    width: 150px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="navbar navbar-default mc-navbar"> 
 
    <div id="product-nav"> 
 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> 
 
     <span class="caret"></span> 
 
    </button> 
 
    <a href="manage.php" class="navbar-brand mc-navbar-brand">Product 1</a> 
 
    <div id="navbar" class="collapse navbar-collapse nav-pills"> 
 
     <ul class="nav navbar-nav navbar-right mc-navbar-right"> 
 
     <li><a href="manage.php">Manage</a> 
 
     </li> 
 
     <li><a href="diagnose.php">Diagnose</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div class="mc-partner-nav"> 
 
     <div class="mc-partner">In partnership with 
 
     <a href="#partner" target="_blank"> 
 
      <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" id="logo"> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</nav>

鏈接的jsfiddle https://jsfiddle.net/3L1ygooa/1/

Answer 1

我用引導row和col-xs-12類

.mc-navbar { 
 
    font-size: 17px; 
 
    background-color: #f8f8f8; 
 
    border-color: #ffffff; 
 
    margin-bottom: 0; 
 
} 
 

 
.navbar-default .mc-navbar-brand { 
 
    color: #3c6190; 
 
} 
 

 
.navbar-default .mc-navbar-brand:focus, 
 
.navbar-default .mc-navbar-brand:hover { 
 
    color: #3c6190; 
 
} 
 

 
.mc-navbar-right { 
 
    font-size: 16px; 
 
    margin-right: 0; 
 
} 
 

 
.mc-partner-nav { 
 
    background-color: #FFFFFF; 
 
} 
 

 
.mc-partner { 
 
    margin-right: 20px; 
 
    text-align: right; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-weight: 300; 
 
    line-height: 30px; 
 
    font-style: italic; 
 
    font-size: 18px; 
 
} 
 

 
#logo { 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    width: 150px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 

 

 

 
<nav class="navbar navbar-default mc-navbar"> 
 
    <div id="product-nav"> 
 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> 
 
     <span class="caret"></span> 
 
    </button> 
 
    <a href="manage.php" class="navbar-brand mc-navbar-brand">Product 1</a> 
 
    <div id="navbar" class="collapse navbar-collapse nav-pills"> 
 
     <ul class="nav navbar-nav navbar-right mc-navbar-right"> 
 
     <li><a href="manage.php">Manage</a> </li> 
 
     <li><a href="diagnose.php">Diagnose</a> </li> 
 
     </ul> 
 
    </div> 
 
    <div class="row mc-partner-nav"> 
 
     <div class="col-xs-12 mc-partner"> In partnership with 
 
     <a href="#partner" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" id="logo"></a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 2

我認爲你可以解決了這個問題。 Css有媒體查詢。

/* smartphone width+height */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px){ 
} 

/* smartphone width */ 
@media only screen and (min-width : 321px) { 
} 

/* smartphone height */ 
@media only screen and (max-width : 320px) { 
} 

/* such as iPhone4 same high height*/ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
} 

/* such as iPhone4 same hight width */ 
@media only screen and (min-width : 640px) { 
} 

/* iPad width+height */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
} 

/* iPad width */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
} 

/* iPad height */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
} 

/* desktop browser width */ 
@media only screen and (min-width : 1224px) { 
} 

/* desktop browser height */ 
@media only screen and (min-width : 1824px) { 
}