Bootstrap 4 响应式布局搞砸了答案

【问题标题】：Bootstrap 4 repsonsive layout messed upBootstrap 4 响应式布局搞砸了
【发布时间】：2018-07-19 15:39:58
【问题描述】：

在为我的网站设计布局时，整个 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>

【问题讨论】：

标签： html css layout responsive-design bootstrap-4

【解决方案1】：

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

所以，我已经注释掉了您的许多自定义 css 规则，因为它们要么是不必要的，要么有助于破坏 Bootstrap。关于我在那里所做的一些替换，请参阅下面的代码 sn-p 中的我的 cmets。

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

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

现在，由于我完全删除或替换了您的一些自定义 css 类（我在下面的代码 sn-p 中将它们注释掉），您也可以从 HTML 代码中删除这些类。

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

这里是工作代码sn-p：

<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

【讨论】：

谢谢，效果很好！我还不知道引导程序中的间距，感谢您指出这一点。

【解决方案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>

引导列必须始终加起来为 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>

希望这会有所帮助！

【讨论】：

啊，是的，您对 cols 的看法完全正确，但这仍然破坏了我的布局，轮播控件超出范围，如果您缩小屏幕，汉堡包只能点击一半。