缩小页面时的按钮问题

Question

我正在尝试执行此导航，但是当我缩小页面时，按钮看起来很糟糕。

在桌面模式下它可以工作，只有当我缩小页面时它才会给我带来问题。按钮变得很大，因为如果写得很长，它就会进入头部：

<section class="main_buttons">
    <div class="container d-none d-sm-none d-md-block">
      <div class="row">
          <div class="col-xl-3 col-lg-3 col-md-3">
              <div class="button">
                  <div class="nav_btn btn btn-primary">
                      <div class="contenitore">
                          <a href="#customise-template">three long words</a>
                          <img src="assets/img/.." alt="">
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-xl-3 col-lg-3 col-md-3">
              <div class="button">
                  <div class="nav_btn btn btn-primary">
                      <div class="contenitore">
                          <a href="#customise-template">testtest</a>
                          <img src="assets/img/.." alt="">
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-xl-3 col-lg-3 col-md-3">
              <div class="button">
                  <div class="nav_btn btn btn-primary">
                      <div class="contenitore">
                          <a href="#customise-template">testtesttest</a>
                          <img src="assets/img/.." alt="">
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-xl-3 col-lg-3 col-md-3">
              <div class="button">
                  <div class="nav_btn btn btn-primary">
                      <div class="contenitore">
                          <a href="#customise-template">test test test test</a>
                          <img src="assets/img/..." alt="">
                      </div>
                  </div>
              </div>
          </div>
      </div>

      <div class="row">
          <div class="col-xl-3 col-lg-3 col-md-3">
              <div class="button">
                  <div class="nav_btn btn btn-primary">
                      <div class="contenitore">
                          <a href="#customise-template">testtest test testtest</a>
                          <img src="assets/img/.." alt="">
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-xl-3 col-lg-3 col-md-3">
            <div
            class="button">
                <div class="nav_btn btn btn-primary sos-button">
                    <div class="contenitore">
                        <a href="#customise-template">test test test</a>
                    </div>
                </div>
            </div>
        </div>
          <div class="col-xl-3 col-lg-3 col-md-3">
              <div
              class="button">
                  <div class="nav_btn btn btn-primary sos-button">
                      <div class="contenitore">
                          <a href="#customise-template">testtest test</a>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>

这就是风格

.nav_btn  {
    text-align: left !important;
    margin: 2px 0;
    width: 100%;
    background-color: white !important;
    border:2px solid #0062CC;
    padding-left: 10px;
    font-size: 16px;
    &:hover {
      background-color:  #0062CC !important;
    }
    &:hover a {
      color:white !important;
    }
    .contenitore {
      width:100%;
      display: flex;
      justify-content: space-between;
      i {
       line-height:20px;
      }
      img {
       width: 20px;
      }
      a {
       text-decoration: none;
       color:#0062CC;
       font-weight: bold;
      }
    }
  }
}

.button .sos-button {
  border: 2px solid #ff4081;
  &:hover {
    background-color:  #ff4081 !important;
  }
  &:hover a {
    color: white;
  }
  a {
    color: #ff4081 !important;
  }
}

Answer 1

使用带边框的宽度有时会使元素比您预期的要大。 您可以在 .nav_btn 之外控制按钮宽度。我尝试了很多方法，我认为这些是针对这种情况的最佳解决方案。

.button {
    width: 200px;  //You can try like that way
}
.nav_btn  {
    text-align: left ;

    margin: 2px;
    background-color: white ;
    border:2px solid #0062CC;
    padding-left: 10px;
    font-size: 16px;
}
.nav_btn:hover {
    background-color:  #0062CC ;
}
.nav_btn a:hover {
    color:white ;
}
.contenitore {  
    display: flex;
    justify-content: space-between;
}
i {
    line-height:20px;
}
img {
    width: 20px;
}
a {
    text-decoration: none;
    color:#0062CC;
    font-weight: bold;
}
.button .sos-button {
    border: 2px solid #ff4081; 
}
.button .sos-button:hover {
    background-color:  #ff4081;
}
.button .sos-button:hover a {
    color: white;
}  
a {
    color: #ff4081;  
}

或者试试这个。

.nav_btn  {
    text-align: left ;
    width: 200;         //or you can try like this one
    margin: 2px;
    background-color: white ;
    border:2px solid #0062CC;
    padding-left: 10px;
    font-size: 16px;
}
.nav_btn:hover {
    background-color:  #0062CC ;
}
.nav_btn a:hover {
    color:white ;
}
.contenitore {  
    display: flex;
    justify-content: space-between;
}
i {
    line-height:20px;
}
img {
    width: 20px;
}
a {
    text-decoration: none;
    color:#0062CC;
    font-weight: bold;
}
.button .sos-button {
    border: 2px solid #ff4081; 
}
.button .sos-button:hover {
    background-color:  #ff4081;
}
.button .sos-button:hover a {
    color: white;
}  
a {
    color: #ff4081;  
}