Question

我正在尝试在索引页面上创建欢迎横幅，但遇到了一个问题，我需要两个按钮之间的距离更近一些，但找不到解决方法。这些按钮应该左右移动，以使其更接近，但它们之间的弯曲是灵活的，没有填充或边距。

这是我的代码：

<section id="career">
<!--Welcome banner-->
    <div class="container-fluid height-51 career-picture d-flex align-items-center justify-content-center">
        <div class="career-text">
            <div class="row">
                <div class="col-md-12">
                    <div class="display-3 text-white text-center font-proximanovabold custom-font-size-header-title">Company</div>
                </div>
                <div class="col-md-12">
                    <div class="h5 text-white text-center font-proximanovalight custom-font-size-header-content">The biggest shipping company on earth</div>
                </div>
                <div class="col-md-6 text-center">
                    <button class="btn btn-green text-white custom-font-size-header-button">ButtonOne</button>
                </div>
                <div class="col-md-6 text-center">
                    <button class="btn btn-green text-white custom-font-size-header-button">ButtonTwo</button>
                </div>
            </div>
        </div>
    </div>
<!--End of welcome banner section-->
</section>

这是我的CSS编辑，可能会以某种方式引起问题：

.height-51{
    min-height: 51.5vh;
}
.career-picture{
    background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url("../images/career.jpg") center/cover no-repeat;
}
#career .btn{
    padding: 12px 24px !important;
}

如何使按钮彼此靠近？为什么用“自己”来推动而不是用边距/填充来推动？感谢任何人。

Answer 1

将按钮放置在新行中，并减小列的宽度，即从col-md-6减少到col-md-2，以使其不占整个行的1/2，从而使行变宽。删除应用的填充。

/* CSS used here will be applied after bootstrap.css */

.height-51 {
  min-height: 51.5vh;
}

.career-picture {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/career.jpg") center/cover no-repeat;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<section id="career">
  <!--Welcome banner-->
  <div class="container-fluid height-51 career-picture d-flex align-items-center justify-content-center">
    <div class="career-text">
      <div class="row">
        <div class="col-md-12">
          <div class="display-3 text-white text-center font-proximanovabold custom-font-size-header-title">Company</div>
        </div>
        <div class="col-md-12">
          <div class="h5 text-white text-center font-proximanovalight custom-font-size-header-content">The biggest shipping company on earth</div>
        </div>

      </div>
      <div class="row justify-content-center">
        <div class="col-md-2 text-center">
          <button class="btn btn-green text-white custom-font-size-header-button">ButtonOne</button>
        </div>
        <div class="col-md-2 text-center">
          <button class="btn btn-green text-white custom-font-size-header-button">ButtonTwo</button>
        </div>
      </div>
    </div>
  </div>
  <!--End of welcome banner section-->
</section>

输出：

Answer 2

将按钮放在同一div中，并将其跨12列...

HTML

<section id="career">
<!--Welcome banner-->
    <div class="container-fluid height-51 career-picture d-flex align-items-center justify-content-center">
        <div class="career-text">
            <div class="row">
                <div class="col-md-12">
                    <div class="display-3 text-white text-center font-proximanovabold custom-font-size-header-title">Company</div>
                </div>
                <div class="col-md-12">
                    <div class="h5 text-white text-center font-proximanovalight custom-font-size-header-content">The biggest shipping company on earth</div>
                </div>
                <div class="col-md-12 text-center">
                    <button class="btn btn-success text-white custom-font-size-header-button">ButtonOne</button>
                 <button class="btn btn-success text-white custom-font-size-header-button">ButtonTwo</button>
                </div>
            </div>
        </div>
    </div>
<!--End of welcome banner section-->
</section>

CSS

.height-51{
  min-height: 51.5vh;
  padding: 1em;
}
.career-picture {
  background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url("../images/career.jpg") center/cover no-repeat;
}
#career .btn{
  padding: 12px 24px;
  margin: 0.5em;
}

如何使按钮彼此靠近？

2 个答案: