HTML/ CSS/ Bootstrap：页脚边缘的导航按钮

Question

我正在尝试在页脚边缘实现三个导航按钮（因此重叠页眉并进入“页面中心”）。它应该看起来像这样：

How it is supposed to look like

我所说的三个按钮是“仪表板”、“报告”和“表单编辑”按钮。

我实际上进行了这个设计，但是当我实现了上面的其他两个按钮（“联系我们”和“注销”）时，3 个导航按钮中的一个跳出了它的位置，我想知道为什么会这样？此外，当我随后实施 bootstrap cdn 时，所有三个按钮都改变了它们的大小和位置，现在我有点迷路了。这是现在的样子：

Current design

我的代码如下： HTML：

<div class="wrapperforstickyfooter">
<header role="banner" class="header-reports">
  <div class="content-wrap">
  <img class="logo" src="../../_images/logo.JPG" alt="Logo">

  <input class="logoutbtns" type="button" value="Log out"/>
  <i class="material-icons" id="logout-icons">lock</i>
  <input class="contactbtns" type="button" value="Contact us"/>
  <i class="material-icons" id="contact-icons">contactmail</i>

  <a class= "buttonDB" href="#"> Dashboard</a>
  <a class= "buttonREP" href="#"> Reports</a>
  <a class= "buttonEDIT" href="#"> Form editing</a>
</div>
</header>

CSS：

.buttonDB, .buttonREP, .buttonEDIT {
background: rgb(234,235,235);
color: rgb(109,111,113);
text-decoration: none;
height: 20px;
width: 180px;
display: inline-block;
text-align: center;
margin-bottom: -20px;
border-top: 10px solid rgb(227,111,30);
position:relative;
left:330px;
top:20px;
font:13px/1.5 Verdana,Helvetica,Arial,sans-serif;
}

.buttonREP {
border-top: 10px solid rgb(225,37,134);
}

.buttonEDIT {
border-top: 10px solid rgb(110,25,112);
}

.content-wrap {
max-width: 1170px;
margin: 0 auto;
padding: 5px;
}

.contentwrap 类的实现是为了确保页面边缘的无文本边距，而不影响页眉和页脚的背景颜色。

不确定您是否需要这个，但这是用于注销和联系我们按钮的 CSS：

.logoutbtns {
  float:right;
  border: none;
  background: rgb(0,143,197);
  color: white;
  font-size: 1em;
  /*padding:30px 15px;*/
  padding-top:30px;
  padding-right: 15px;
  margin-right:0;
  margin-bottom:0;
}

.contactbtns {
  float:right;
  border: none;
  background: rgb(0,143,197);
  color: white;
  font-size: 1em;
  padding-top:30px;
  padding-right: 10px;
  margin-right:40px;
  margin-bottom:0;
}

.material-icons{
color:white;
float:right;
}

#logout-icons, #contact-icons{
margin-top:25px;
margin-right:0px;
margin-bottom:0;
padding-bottom:0;
}

我被困在这里，无法弄清楚我做错了什么。

Answer 1

这能解决您的问题吗？仅对 .buttonDB、.buttonREP、.buttonEDIT {} 进行了更改并添加了按钮组类。您可以根据需要更改按钮组类的位置，无论您想要相对边距还是绝对边距，都可以围绕它进行调整。

.button-group{
  display: flex; 
  position: absolute; 
  right:15%; 
  top: 100px;
}

.buttonDB, .buttonREP, .buttonEDIT {
background: rgb(234,235,235);
color: rgb(109,111,113);
text-decoration: none;
height: 50px;
width: 180px;
display: inline-block;
text-align: center;
border-top: 10px solid rgb(227,111,30);
position:relative;
font:13px/1.5 Verdana,Helvetica,Arial,sans-serif;
margin-right: 10px;
}


.buttonREP {
border-top: 10px solid rgb(225,37,134);
}

.buttonEDIT {
border-top: 10px solid rgb(110,25,112);
}

.content-wrap {
max-width: 1170px;
margin: 0 auto;
padding: 5px;
}

.logoutbtns {
  float:right;
  border: none;
  background: rgb(0,143,197);
  color: white;
  font-size: 1em;
  /*padding:30px 15px;*/
  padding-top:30px;
  padding-right: 15px;
  margin-right:0;
  margin-bottom:0;
}

.contactbtns {
  float:right;
  border: none;
  background: rgb(0,143,197);
  color: white;
  font-size: 1em;
  padding-top:30px;
  padding-right: 10px;
  margin-right:40px;
  margin-bottom:0;
}

.material-icons{
color:white;
float:right;
}

#logout-icons, #contact-icons{
margin-top:25px;
margin-right:0px;
margin-bottom:0;
padding-bottom:0;
}

@media only screen
and (max-width : 700px) {
.button-group{ 
  right:3%; 
}
.buttonDB, .buttonREP, .buttonEDIT {
   height: 30px;
   width: 100px;
  }
}

<div class="wrapperforstickyfooter">
<header role="banner" class="header-reports">
  <div class="content-wrap">
  <img class="logo" src="../../_images/logo.JPG" alt="Logo">

  <input class="logoutbtns" type="button" value="Log out"/>
  <i class="material-icons" id="logout-icons">lock</i>
  <input class="contactbtns" type="button" value="Contact us"/>
  <i class="material-icons" id="contact-icons">contactmail</i>

  <div class="button-group">
  <a class= "buttonDB" href="#"> Dashboard</a>
  <a class= "buttonREP" href="#"> Reports</a>
  <a class= "buttonEDIT" href="#"> Form editing</a>
</div>
</div>
</header>
</div>

我对答案进行了更改，希望对您有所帮助。

Answer 2

@Harshit：

感谢您的回答！如前所述，它有效，现在看起来非常好。但是，在调整窗口大小（即缩小窗口）时，按钮会保持在原来的位置，因此右侧的边距不会改变，它们的大小也不会调整。

我现在将按钮组类调整为如下所示：

.button-group{
display:flex;
position:absolute;
right:7%;
top:100px;
}

这是页面一开始的样子。这些按钮正是它们应有的样子：

这是缩小后的样子：

可以直接看到按钮到右边缘的距离相同，而其他东西立即开始缩小到右边缘的距离。此外，当我把它做得非常小时，按钮一旦位于窗口的左边缘就会消失。我在这里做错了什么吗？