Question

再次，我需要你的帮助。

我的项目出了问题。在我的菜单上，当我选择其中一个时，我希望边框位于菜单的底部，文字要垂直对齐，vertical-align : middle使用display table打破了我的所有菜单。

这是我的代码：

＆＃13;

.infos-btn {
  text-transform: uppercase;
  color: #482A81;
  box-shadow: 0px 3px 10px #888;
}

.infos-btn>div:hover {
  cursor: pointer;
}

.selected-btn {
  border-bottom: 3px solid #482A81;
  color: #482A81;
  font-weight: bold;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row text-center px-3 infos-btn">
  <div class="col-md col-sm py-3 selected-btn">Menu</div>
  <div class="col-md col-sm py-3">Menu</div>
  <div class="col-md col-sm py-3">Menu</div>
  <div class="col-md col-sm py-3">Menu longer than others</div>
  <div class="col-md col-sm py-3">Menu</div>
</div>

＆＃13;

我希望它具有响应性，我知道如果我设置保证金：0自动;它会起作用，但边框不会出现在菜单的底部

感谢您的帮助！

Answer 1

尝试宽度：50％，因此它总是从屏幕的50％开始。

Answer 2

使用以下代码替换HTML代码：＆＃34; align-items-center＆＃34; class被添加到父div

<div class="row text-center px-3 align-items-center infos-btn">
            <div class="col-md col-sm py-3 selected-btn">Menu</div>
            <div class="col-md col-sm py-3">Menu</div>
            <div class="col-md col-sm py-3">Menu</div>
            <div class="col-md col-sm py-3">Menu longer than others</div>
            <div class="col-md col-sm py-3">Menu</div>
</div>

垂直对齐文本Bootstrap 4

2 个答案: