Question

我在Bootstrap导航中尝试两个浮动两个元素，但它不起作用。

＆＃13;

.cls1 {
  float: left !important;
}

.cls2 {
  float: right !important;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-default navbar-static-top hidden-sm hidden-md hidden-lg">
  <div class="container">
    <div class="navbar-header">
      <button type="button" data-target="#navbarCollapse5" data-toggle="collapse" class="navbar-toggle cls1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>
      <div class="cls2">
        <i class="fa fa-facebook" aria-hidden="true"></i>
        <i class="fa fa-youtube-play" aria-hidden="true"></i>
        <i class="fa fa-twitter" aria-hidden="true"></i>
        <i class="fa fa-google-plus" aria-hidden="true"></i>
        <i class="fa fa-pinterest-p" aria-hidden="true"></i>
        <i class="fa fa-instagram" aria-hidden="true"></i>
        <i class="fa fa-heart" aria-hidden="true"></i>
        <i class="fa fa-tumblr" aria-hidden="true"></i>
        <i class="fa fa-soundcloud" aria-hidden="true"></i>
        <i class="fa fa-vimeo-square" aria-hidden="true"></i>
        <i class="fa fa-linkedin" aria-hidden="true"></i>
        <i class="fa fa-rss" aria-hidden="true"></i>
      </div>
    </div>
    <div id="navbarCollapse5" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">HOME</a></li>
        <li><a href="#">NATURE</a></li>
        <li><a href="#">TRAVEL</a></li>
        <li><a href="#">CONTACT</a></li>
        <li><a href="#">ABOUT ME</a></li>
        <li><a href="#">MUSIC</a></li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

我错过了什么吗？是否存在我没有看到的冲突？

Answer 1

有类.hidden-lg它有css样式

＆＃13;

@media (max-width: 1199px) and (min-width: 992px)
.hidden-md {
    display: none!important;
}
@media (min-width: 1200px)
.hidden-lg {
    display: none!important;
}
@media (max-width: 991px) and (min-width: 768px)
.hidden-sm {
    display: none!important;
}

＆＃13;

由于这些引导类，整个元素应该隐藏在DOM中。低于768px的窗口大小应该可以工作。

下面编辑代码并尝试

＆＃13;

.cls1 {
  float: left !important;
}

.cls2 {
  float: right !important;
}
@media (max-width: 768px) {
	.cls3 {
		float: right !important;
	}
	.cls2 {
		display:none;
	}
}

＆＃13;

<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<head>
<body>
<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" data-target="#navbarCollapse5" data-toggle="collapse" class="navbar-toggle cls1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>
	<div class="cls3 hidden-sm hidden-md hidden-lg">
		<i class="fa fa-facebook" aria-hidden="true"></i>
		<i class="fa fa-youtube-play" aria-hidden="true"></i>
		<i class="fa fa-twitter" aria-hidden="true"></i>
		<i class="fa fa-google-plus" aria-hidden="true"></i>
		<i class="fa fa-pinterest-p" aria-hidden="true"></i>
		<i class="fa fa-instagram" aria-hidden="true"></i>
		<i class="fa fa-heart" aria-hidden="true"></i>
		<i class="fa fa-tumblr" aria-hidden="true"></i>
		<i class="fa fa-soundcloud" aria-hidden="true"></i>
		<i class="fa fa-vimeo-square" aria-hidden="true"></i>
		<i class="fa fa-linkedin" aria-hidden="true"></i>
		<i class="fa fa-rss" aria-hidden="true"></i>
	 </div>      
    </div>	
    <div id="navbarCollapse5" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">HOME</a></li>
        <li><a href="#">NATURE</a></li>
        <li><a href="#">TRAVEL</a></li>
        <li><a href="#">CONTACT</a></li>
        <li><a href="#">ABOUT ME</a></li>
        <li><a href="#">MUSIC</a></li>
      </ul>
    </div>
	<div class="cls2">
		<i class="fa fa-facebook" aria-hidden="true"></i>
		<i class="fa fa-youtube-play" aria-hidden="true"></i>
		<i class="fa fa-twitter" aria-hidden="true"></i>
		<i class="fa fa-google-plus" aria-hidden="true"></i>
		<i class="fa fa-pinterest-p" aria-hidden="true"></i>
		<i class="fa fa-instagram" aria-hidden="true"></i>
		<i class="fa fa-heart" aria-hidden="true"></i>
		<i class="fa fa-tumblr" aria-hidden="true"></i>
		<i class="fa fa-soundcloud" aria-hidden="true"></i>
		<i class="fa fa-vimeo-square" aria-hidden="true"></i>
		<i class="fa fa-linkedin" aria-hidden="true"></i>
		<i class="fa fa-rss" aria-hidden="true"></i>
	  </div>
  </div>
</nav>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

＆＃13;

浮动不使用Bootstrap？

1 个答案: