Bootstrap 4 repsonsive布局混乱了

Question

在为我的网站进行布局时，整个CSS都搞砸了，到了我看不到森林槽的地步。

在桌面尺寸上，一切看起来都不错，除了图标旁边的文字(由于某种原因，它在文本上漂浮在文本上(被压制在一起，我没有得到我如何使它显示出来显示一条线上的整个句子。然后，当您调整网站大小时，我将整个3个图标 文本部分丢失在轮播和折叠菜单下。最好是我希望菜单在3个图标 文本部分下扩展。

不知道该调整大小后如何使它立即出现。

https://jsfiddle.net/adyzv8yu/

#mu-carousel .carousel-item {
    max-height: 480px;
    width: 100%;
}
.mu-nav-collapse .navbar-nav{
    float:none;
    margin:0 auto;
    display: block;
    width: 100%;
}
.mpush {
    margin-top: -8px;
}
.navbar-nav >li{
    text-align: left;
    background: white;
    display: inline-block;
}
.navbar-nav .dropdown .dropdown-menu
{
    border: none;
    background-color: white;
}
.sticky-top {
    position: relative;
}
.navbar-toggler {
    background: darkgrey;
}
@media (min-width: 768px) {
    .mpush {
        margin-top: -28px;
    }
    #mu-carousel {
        margin-top: -28px;
    }
    .mu-nav {
        margin-top: -28px;
        background: white;
    }
    .navbar-nav {
        float:none;
        margin:0 auto;
        display: block;
        text-align: center;
    }
    .navbar-nav >li {
        background: white;
    }
    .navbar-nav .dropdown .dropdown-menu
    {
        background-color: white;
    }
    .mu-nav-bg {
        background: white;
    }
    .sticky-top {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1020;
    }
}
#mu-header {
    background: lightgrey;
    height: 135px;
}
.mu-header-logo {
    height: 85px;
    width: auto;
}
.mu-header-area {
    margin-top: 35px;
    height: 85px;
    width: auto;
    line-height: 0.1;
}
.mu-header-area i{
    float:left;
    padding-right: 15px;
}
.icon-tex-title{
    padding-top: 6px;
    font-size: 14px;
    font-weight: 900;
}
.icon-tex-subtitle{
    font-size: 11px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
  
<header id="mu-header" style="">
    <div class="container">
        <div class="row">
            <div class="col-8 col-md-6">
                <span class="mu-header-logo">
                    <img src="http://www.cablecorporation.co.za/wp-content/uploads/2017/09/dummy-logo.png" alt="">
                </span>
            </div>
            <div class="col-4 d-flex d-md-none justify-content-end navbar navbar-expand-md navbar-light bg-faded">
                <button class="navbar-toggler navbar-toggler-right2 mu-nav-collapse" type="button" data-toggle="collapse"
                        data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
            <div class="col-md-2">
                <div class="mu-header-area">
                    <i class="fa fa-phone fa-2x"></i>
                    <p class="icon-tex-title">1234-123456</p>
                    <p class="icon-tex-subtitle">Lorem ipsum dolor sit amet</p>
                </div>
            </div>
            <div class="col-md-2">
                <div class="mu-header-area">
                    <i class="fa fa-phone fa-2x"></i>
                    <p class="icon-tex-title">1234-123456</p>
                    <p class="icon-tex-subtitle">Lorem ipsum dolor sit amet</p>
                </div>
            </div>
            <div class="col-md-2">
                <div class="mu-header-area t">
                    <i class="fa fa-phone fa-2x"></i>
                    <p class="icon-tex-title">1234-123456</p>
                    <p class="icon-tex-subtitle">Lorem ipsum dolor sit amet</p>
                </div>
            </div>
        </div>
    </div>
</header>
<div class="container sticky-top mpush mu-nav">
    <div class="row">
        <div class="col-md-12">
            <nav class="navbar navbar-expand-md navbar-light bg-faded">
                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pricing</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropdown link
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</div>
<section id="mu-carousel" class="mpush">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
                <img class="d-block img-fluid" src="https://static.pexels.com/photos/93140/pexels-photo-93140.jpeg" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block img-fluid" src="https://static.pexels.com/photos/93140/pexels-photo-93140.jpeg" alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block img-fluid" src="https://static.pexels.com/photos/93140/pexels-photo-93140.jpeg" alt="Third slide">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>

Answer 1

解决方案不需要任何float。相反，对引导程序友好的解决方案需要少自定义CSS，而不是更多。

所以，我已经评论了您的许多自定义CSS规则，因为它们是不必要的，要么有助于破坏引导程序。关于我在那里进行的一些替代品，请参阅下面的代码段中的评论。

主要问题的解决方案是将height: 135px;替换为#mu-header。

图标问题的解决方案是将<i class="fa fa-phone fa-2x"></i>移入段落元素中。

现在，由于我完全删除或更换了一些自定义CSS类(我在下面的代码片段中对它们进行了评论(，因此您也可以从HTML代码中删除这些类。

作为奖励，我还使用徽标的col-8 col-md-3 col-lg-6类和其他项目的col-md-3 col-lg-2类使这些列更加响应。

这是工作代码段：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    
<style>
    #mu-carousel .carousel-item {
        max-height: 480px;
        width: 100%;
    }
    .mu-nav-collapse .navbar-nav{
        float:none;
        margin:0 auto;
        display: block;
        width: 100%;
    }
    .mpush {
        margin-top: -8px;
    }
    .navbar-nav >li{
        text-align: left;
        background: white;
        display: inline-block;
    }
    .navbar-nav .dropdown .dropdown-menu
    {
        border: none;
        background-color: white;
    }
    .sticky-top {
        position: relative;
    }
    .navbar-toggler {
        background: darkgrey;
    }
    @media (min-width: 768px) {
        .mpush {
            margin-top: -28px;
        }
        #mu-carousel {
            margin-top: -28px;
        }
        .mu-nav {
            margin-top: -28px;
            background: white;
        }
        .navbar-nav {
            float:none;
            margin:0 auto;
            display: block;
            text-align: center;
        }
        .navbar-nav >li {
            background: white;
        }
        .navbar-nav .dropdown .dropdown-menu
        {
            background-color: white;
        }
        .mu-nav-bg {
            background: white;
        }
        .sticky-top {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            z-index: 1020;
        }
    }
    #mu-header {
        background: lightgrey;
/*        height: 135px; replaced with min-height: 135px; */
        min-height: 135px;
    }
/*
    .mu-header-logo {
        height: 85px;
        width: auto;
    }
*/
    .mu-header-area {
/*        margin-top: 35px; replaced with responsive classes: `mt-0 mt-md-4` */
/*        height: 85px;*/
/*        width: auto;*/
/*        line-height: 0.1;*/
    }
/*
    .mu-header-area i{
        float:left;
        padding-right: 15px;
    }
*/
    .icon-tex-title{
        padding-top: 6px;
        font-size: 14px;
        font-weight: 900;
    }
/*
    .icon-tex-subtitle{
        font-size: 11px; replaced with the `small` class
    }
*/
</style>
<header id="mu-header" style="">
    <div class="container">
        <div class="row">
            <div class="col-8 col-md-3 col-lg-6">
                <span class="mu-header-logo">
                    <img src="http://www.cablecorporation.co.za/wp-content/uploads/2017/09/dummy-logo.png" alt="">
                </span>
            </div>
            <div class="col-4 d-flex d-md-none justify-content-end navbar navbar-expand-md navbar-light bg-faded">
                <button class="navbar-toggler navbar-toggler-right2 mu-nav-collapse" type="button" data-toggle="collapse"
                        data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
            <div class="col-md-3 col-lg-2 mt-0 mt-md-4 pl-md-5 pr-md-0 pl-lg-3">
                <div class="mu-header-area">
                    <p class="icon-tex-title mb-1">
                    <i class="fa fa-phone fa-2x"></i> 1234-123456</p>
                    <p class="small">Lorem ipsum dolor sit sit sit sit sit sit sit sit</p>
                </div>
            </div>
            <div class="col-md-3 col-lg-2 mt-0 mt-md-4 pl-md-5 pr-md-0 pl-lg-3">
                <div class="mu-header-area">
                    <p class="icon-tex-title mb-1">
                    <i class="fa fa-phone fa-2x"></i> 1234-123456</p>
                    <p class="small">Lorem ipsum dolor sit</p>
                </div>
            </div>
            <div class="col-md-3 col-lg-2 mt-0 mt-md-4 pl-md-5 pr-md-0 pl-lg-3">
                <div class="mu-header-area t">
                    <p class="icon-tex-title mb-1">
                    <i class="fa fa-phone fa-2x"></i> 1234-123456</p>
                    <p class="small">Lorem ipsum dolor sit</p>
                </div>
            </div>
        </div>
    </div>
</header>
<div class="container sticky-top mpush mu-nav">
    <div class="row">
        <div class="col-md-12">
            <nav class="navbar navbar-expand-md navbar-light bg-faded">
                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pricing</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropdown link
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</div>
<section id="mu-carousel" class="mpush">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
                <img class="d-block img-fluid" src="https://static.pexels.com/photos/93140/pexels-photo-93140.jpeg" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block img-fluid" src="https://static.pexels.com/photos/93140/pexels-photo-93140.jpeg" alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block img-fluid" src="https://static.pexels.com/photos/93140/pexels-photo-93140.jpeg" alt="Third slide">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>

对于图标列，我使用了以下响应间距类：

mt-0 mt-md-4 pl-md-5 pr-md-0 pl-lg-3

有关间距类使用的更多信息：

https://getbootstrap.com/docs/4.0/utilities/pacing/

Answer 2

为了使您的菜单以较小的宽度出现在图标下方，您需要将float CC_9 .container到 left，以小宽度：

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

至于您的文本挤压在一起，这不会在堆栈Nippet中发生(尽管它在JSFiddle中确实如此(。我认为这是因为它没有足够的width来正确显示。这是因为您在<header>内使用了错误数量的bootstrap列：

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

bootstrap列必须始终添加到12个，然后添加至18。将其纠正为以下结构(总计12(应解决以下问题：

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

这可以在以下内容中看到：

#mu-carousel .carousel-item {
  max-height: 480px;
  width: 100%;
}
.mu-nav-collapse .navbar-nav {
  float: none;
  margin: 0 auto;
  display: block;
  width: 100%;
}
.mpush {
  margin-top: -8px;
}
.navbar-nav>li {
  text-align: left;
  background: white;
  display: inline-block;
}
.navbar-nav .dropdown .dropdown-menu {
  border: none;
  background-color: white;
}
.sticky-top {
  position: relative;
}
.navbar-toggler {
  background: darkgrey;
}
@media (min-width: 768px) {
  .mpush {
    margin-top: -28px;
  }
  #mu-carousel {
    margin-top: -28px;
  }
  .mu-nav {
    margin-top: -28px;
    background: white;
  }
  .navbar-nav {
    float: none;
    margin: 0 auto;
    display: block;
    text-align: center;
  }
  .navbar-nav>li {
    background: white;
  }
  .navbar-nav .dropdown .dropdown-menu {
    background-color: white;
  }
  .mu-nav-bg {
    background: white;
  }
  .sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
#mu-header {
  background: lightgrey;
  height: 135px;
}
.mu-header-logo {
  height: 85px;
  width: auto;
}
.mu-header-area {
  margin-top: 35px;
  height: 85px;
  width: auto;
  line-height: 0.1;
}
.mu-header-area i {
  float: left;
  padding-right: 15px;
}
.icon-tex-title {
  padding-top: 6px;
  font-size: 14px;
  font-weight: 900;
}
.icon-tex-subtitle {
  font-size: 11px;
}
@media (max-width: 768px) {
  .container {
    float: left;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<header id="mu-header" style="">
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <span class="mu-header-logo">
          <img src="http://www.cablecorporation.co.za/wp-content/uploads/2017/09/dummy-logo.png" alt="">
        </span>
      </div>
      <div class="col-md-3 d-flex d-md-none justify-content-end navbar navbar-expand-md navbar-light bg-faded">
        <button class="navbar-toggler navbar-toggler-right2 mu-nav-collapse" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
      <div class="col-md-2">
        <div class="mu-header-area">
          <i class="fa fa-phone fa-2x"></i>
          <p class="icon-tex-title">1234-123456</p>
          <p class="icon-tex-subtitle">Lorem ipsum dolor sit amet</p>
        </div>
      </div>
      <div class="col-md-2">
        <div class="mu-header-area">
          <i class="fa fa-phone fa-2x"></i>
          <p class="icon-tex-title">1234-123456</p>
          <p class="icon-tex-subtitle">Lorem ipsum dolor sit amet</p>
        </div>
      </div>
      <div class="col-md-2">
        <div class="mu-header-area t">
          <i class="fa fa-phone fa-2x"></i>
          <p class="icon-tex-title">1234-123456</p>
          <p class="icon-tex-subtitle">Lorem ipsum dolor sit amet</p>
        </div>
      </div>
    </div>
  </div>
</header>
<div class="container sticky-top mpush mu-nav">
  <div class="row">
    <div class="col-md-12">
      <nav class="navbar navbar-expand-md navbar-light bg-faded">
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown link
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </div>
</div>
<section id="mu-carousel" class="mpush">
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active">
        <img class="d-block img-fluid" src="https://static.pexels.com/photos/93140/pexels-photo-93140.jpeg" alt="First slide">
      </div>
      <div class="carousel-item">
        <img class="d-block img-fluid" src="https://static.pexels.com/photos/93140/pexels-photo-93140.jpeg" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="d-block img-fluid" src="https://static.pexels.com/photos/93140/pexels-photo-93140.jpeg" alt="Third slide">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</section>

希望这会有所帮助！