Bootstrap 4 repsonsive布局搞砸了

Question

在为我的网站制作我的布局时，整个css搞砸了，我不能再看到森林穿过树林了。

在桌面尺寸上，一切看起来都不错，除了图标旁边的文字（由于某些原因它在文本顶部浮动的小提琴）被压扁在一起，我不明白我怎么能让它显示出来整句话在一行。然后，当您调整网站大小时，我会在旋转木马和折叠菜单下丢失整个3个图标+文本部分。我希望菜单能够在3个图标+文本部分下展开。

不知道如何在调整大小后立即显示它。

https://jsfiddle.net/adyzv8yu/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

该解决方案不需要任何float。相反，Bootstrap友好的解决方案需要 less 自定义css，而不是更多。

所以，我已经注释掉了许多自定义css规则，因为它们不必要或者有助于破坏Bootstrap。请参阅下面的代码片段中有关我在那里进行的一些替换的评论。

主要问题的解决方案是将height: 135px;替换为min-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/spacing/

Answer 2

为了让您的图标以较小的宽度显示在图标下方，您需要float .container left以小宽度显示：

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

至于你的文本挤压在一起，这不会发生在StackSnippet中（虽然它在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>

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！