如何將按鈕與下拉行內與其他鏈接錨對齊-有解無憂

`我希望下拉選單正確對齊，而不是與螢屏左側對齊。我希望它回應

.top-section{
   padding-top: 2rem;
}
.btn-search{
   background-color: #EEEFEE;
   border-radius: 0px !important;
}
.fa-search{
   color: #8E8F8F;
}
.form-control{
   border-radius: 0px !important;
}
.link-end{
   text-align: end;
   display: flex;
    justify-content: end;
    align-items: baseline;
}
.first-link{
   margin-right: 2rem;
}
@media (max-width:991px) {
   .link-end{
      padding-top: 2rem;
   }
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
   <!-- jQuery library -->
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
   <!-- Popper JS -->
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
   <!-- Latest compiled JavaScript -->
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> 
   <script src="https://use.fontawesome.com/f1e10fbba5.js"></script> 
   <link rel="stylesheet" href="contact.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Print-Shop Contact</title>
</head>
<body>
   <div class="top-section">
      <div class="col-lg-12">
         <div class="row">
            <div class="col-lg-4 col-12">
               <div class="input-group">
                  <input type="text" class="form-control">
                  <div class="input-group-append">
                    <button class="btn btn-search" type="button">
                      <i class="fa fa-search"></i>
                    </button>
                  </div>
                </div>
            </div>
           <!--Empty Div-->
           <div class="col-lg-4 d-md-block d-none"></div>
           <!--End of Empty Div-->
            <div class="col-lg-4 col-12">
               <div class="link-end">
                  <a href="#" class="first-link">Help</a>
                  <div class="dropdown">
                     <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                       Action
                     </button>
                     <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                       <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>
                   </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</body>
</html>

我希望下拉選單負責。只有當我將兩者都對齊到行內時，它才會變得不負責任。我希望下拉選單正確對齊，而不是與螢屏左側對齊。我希望它回應

uj5u.com熱心網友回復：

為了測驗網格結構，我洗掉了為元素添加邊距和填充的樣式。然后我更新了回應式設計的列；請參閱參考檔案，了解網格系統在不同瀏覽器尺寸下的顯示方式不同。

如何將按鈕與下拉行內與其他鏈接錨對齊

.btn-search {
  background-color: #EEEFEE;
}

.fa-search {
  color: #8E8F8F;
}

.link-end {
  text-align: end;
  display: flex;
  justify-content: end;
  align-items: baseline;
}

.first-link {
 margin-right: 10px;
}

.customDropdownStyle{
  margin-right: 110px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> 
    <script src="https://use.fontawesome.com/f1e10fbba5.js"></script> 
    <link rel="stylesheet" href="contact.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print-Shop Contact</title>
  </head>
  <body>
    <div class="top-section">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-4">
          <div class="input-group">
            <input type="text" class="form-control">
            <div class="input-group-append">
              <button class="btn btn-search" type="button">
                <i class="fa fa-search"></i>
              </button>
            </div>
          </div>
        </div>
        
        <div class="col-lg-4 col-md-4 col-sm-4 col-4"></div>
        
        <div class="col-lg-4 col-md-4 col-sm-4 col-4">
          <div class="link-end">
            <a href="#" class="first-link">Help</a>
            
            <div class="dropdown customDropdownStyle">
              <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <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>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

參考

網格系統

uj5u.com熱心網友回復：

只需更新此類的 css 在 css 中.link-end添加這一行 align-items: flex-end;

檢查更新代碼的鏈接。更新代碼

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/407520.html

標籤：

上一篇：Bootstrap5不允許我向地圖添加其他顏色

下一篇：Bootstrap模態隱藏功能不起作用