Question

我在一个导航中有一个包含2个div的页面。当屏幕大小的宽度超过1024px时，该页面中的所有内容都看起来像我想要的那样。但是一旦我将宽度减小到小于768，那么2 div就会合并到一起。使用1st并将其显示为一行而不是原始的2.当屏幕尺寸减小时，我希望它仍然在两个不同的行中

＆＃13;

$(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');
    }
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

链接到jsfiddle https://jsfiddle.net/3L1ygooa/1/

Answer 1

我认为你可以解决这个问题。 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) {
}

Answer 2

我已使用bootstrap clearfix和.mc-partner-nav类将row应用于col-xs-12

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

对于所有屏幕尺寸，在一个导航中将1st 2nd设置为低于1st

2 个答案: