浮动不能与 Bootstrap 一起使用？答案

【问题标题】：Floats not working with Bootstrap?浮动不能与 Bootstrap 一起使用？
【发布时间】：2017-11-22 17:46:11
【问题描述】：

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

.cls1 {
  float: left !important;
}

.cls2 {
  float: right !important;
}

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

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

【问题讨论】：

哪个引导版本？
我建议你使用 pull-right 和 pull-left 类的 bootstrap
你为什么有：hidden-sm hidden-md hidden-lg in
因为整个导航栏是不可见的在更大的屏幕上
sn-p 不工作的原因是什么？按照指示，类 cls2 的 div 向右浮动。
@SebastianBrosch 3.3.7

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

有类 .hidden-lg 它有 css 样式

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

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

下面编辑代码并尝试一下

.cls1 {
  float: left !important;
}

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

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

【讨论】：

很抱歉，您的解决方案对我没有多大意义。