Html 引导4重复布局混乱

当我在为我的网站设计布局时，整个css被搞得一团糟，以至于我再也看不到森林了

在桌面大小上，一切看起来都很正常，除了图标旁边的文本（在小提琴中，由于某种原因，它漂浮在文本顶部）被挤压在一起，我不知道如何让它在一行上显示整个句子。然后，当你调整网站大小时，我会丢失旋转木马和折叠菜单下的全部3个图标+文本部分。最好我希望菜单在3个图标+文本部分下展开

不知道我怎样才能让它一调整大小就显示出来

#mu转盘。转盘项目{
最大高度：480px；
宽度：100%；
}
.mu导航折叠。导航条导航{
浮动：无；
保证金：0自动；
显示：块；
宽度：100%；
}
姆普什先生{
利润上限：-8px；
}
.navbar nav>li{
文本对齐：左对齐；
背景：白色；
显示：内联块；
}
.navbar导航.下拉菜单.下拉菜单
{
边界：无；
背景色：白色；
}
.粘头{
位置：相对位置；
}
.导航杆切换器{
背景：darkgrey；
}
@介质（最小宽度：768px）{
姆普什先生{
利润上限：-28px；
}
#mu旋转木马{
利润上限：-28px；
}
穆纳夫先生{
利润上限：-28px；
背景：白色；
}
.导航栏导航{
浮动：无；
保证金：0自动；
显示：块；
文本对齐：居中；
}
.navbar nav>li{
背景：白色；
}
.navbar导航.下拉菜单.下拉菜单
{
背景色：白色；
}
穆纳夫先生{
背景：白色；
}
.粘头{
职位：-网络工具包粘性；
位置：粘性；
排名：0；
z指数：1020；
}
}
#亩头{
背景：浅灰色；
高度：135px；
}
.mu头标{
高度：85px；
宽度：自动；
}
.亩头面积{
利润上限：35px；
高度：85px；
宽度：自动；
线高：0.1；
}
.mu收割台区域i{
浮动：左；
右侧填充：15px；
}
.icon tex标题{
填充顶部：6px；
字体大小：14px；
字号：900；
}
.icon tex字幕{
字体大小：11px；
}

1234-123456

Lorem ipsum dolor sit amet

1234-123456

Lorem ipsum dolor sit amet

1234-123456

Lorem ipsum dolor sit amet

为了使菜单以较小的宽度显示在图标下方，您需要将

容器以较小的宽度浮动到
左侧
：

@media (max-width: 768px) {
  .container {
    float: left;
  }
}

至于将文本压缩在一起，这在StackSnippet中不会发生（尽管在JSFIDLE中会发生）。我认为这是因为它没有足够的宽度来正确显示。这是因为您在
中使用了错误数量的引导列：


1234-123456

Lorem ipsum dolor sit amet

1234-123456

Lorem ipsum dolor sit amet

1234-123456

Lorem ipsum dolor sit amet











解决方案不需要任何
浮点值。相反，一个引导友好的解决方案需要更少的定制css，而不是更多

所以，我已经注释掉了您的许多自定义css规则，因为它们要么是不必要的，要么有助于破坏引导。请参阅regar中下面代码段中的我的注释
<div class="row">
  <div class="col-8 col-md-6"></div>
  <div class="col-4"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
</div>

<div class="row">
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
</div>