如何在*自举按钮*后面放置背景色

Question

我试图在单击按钮时出现输入，但是随后我希望在按钮和输入周围始终有一个背景。目前，我的标记呈现如下：

因此，当单击原因时，我基本上想要“原因”按钮和输入周围的黄色（警告警告）背景。我的标记看起来像这样：

div.saveReason {
    display: inline;
    background-color: #fff3cd;
    border: solid 1px #ffeeba;
    border-bottom-width: 0;
    padding-bottom: 20px;
    z-index: 1;
}
div.saveReasonDetail {
    z-index: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div>
    <a class="btn btn-primary mr-2 SaveEdits">Save</a>
    <div class="saveReason"><a href="#" class="btn btn-secondary mr-2 SaveReason">Reason</a></div>
    <a class="btn btn-link CancelEdits">Cancel</a>
    <div class="alert alert-warning mt-2 saveReasonDetail">
        <div class="form-group viReason">
            <div class="validator-container">
                <textarea name="iReason" rows="4" id="iReason" class="form-control iReason"></textarea>
            </div>
        </div>
    </div>
</div>

我的问题是：

1）我不希望按钮下方的边框...我希望边框仅不是黄色的“外部”。

2）我希望黄色背景在“原因”按钮的外面延伸一点（不影响已经存在的按钮之间的边距）。

这可能吗？

更新：我从Kareem Dabbeet和Chase Ingebritson得到了有效的答案。 Kareem首先被标记为答案，但不是HTML方面的专家，我认为Chase关于“相同容器”的评论似乎很重要。确保也查看他的答案。

Answer 1

第一个问题：

只需编辑div.saveReasonDetail的位置并将其设置为inherit：

div.saveReasonDetail {
    position: inherit;
}

现在编辑saveReason的边框底部颜色，使其与'saveReasonDetail'bg-color相同：

border-bottom-color: #FFF3CD

对于第二个问题：要在每个按钮之间模拟一个m-2，您需要将保存按钮上的margin-right更改为m-1，并使用相同的值向左/右添加填充，原因按钮如下所示：

    .SaveEdits { 
      margin-right: 0 !important;
    }

    div.saveReason { 
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        padding-top: 10px;
    }

我为“取消”链接上了颜色，以确保页边距没问题

这是最终结果

div.main { 
    padding-top: 20px; 
}
div.saveReason {
    display: inline;
    background-color: #fff3cd;
    border: solid 1px #ffeeba;
    border-bottom-color: #fff3cd;
    padding-bottom: 20px;
    padding-top: 10px;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    z-index: 1;
}
div.saveReasonDetail {
   position: inherit;
}

.SaveEdits { 
margin-right: 0 !important
}
.CancelEdits { 
background-color: purple !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main">
    <a class="btn btn-primary mr-1 SaveEdits">Save</a>
    <div class="saveReason"><a href="#" class="btn btn-secondary SaveReason"">Reason</a></div>
    <a class="btn btn-link ml-1 CancelEdits">Cancel</a>
    <div class="alert alert-warning mt-2 saveReasonDetail">
        <div class="form-group viReason">
            <div class="validator-container">
                <textarea name="iReason" rows="4" id="iReason" class="form-control iReason"></textarea>
            </div>
        </div>
    </div>
</div>

Answer 2

在这种情况下，您可能希望将button元素和textfield元素都放在同一容器中。他们共享同一个父级后，可以将文本字段的position设置为absolute，并且不会影响其他按钮的位置。

div.main { padding-top: 20px; }
div.saveReason {
  background-color: #fff3cd;
  border: solid 1px #ffeeba;
  border-bottom-width: 0;
  z-index: 1;
  
  display: inline-block;
  padding: 10px;
}

.saveReason > .btn {
  margin-right: 0 !important;
}

div.saveReasonDetail {
  z-index: -1;
  
  position: absolute;
  width: 100%;
  left: 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="main">
  <a class="btn btn-primary mr-2 SaveEdits">Save</a>
  <div class="saveReason">
    <a href="#" class="btn btn-secondary mr-2 SaveReason">Reason</a>
    <div class="alert alert-warning mt-2 saveReasonDetail">
      <div class="form-group viReason">
        <div class="validator-container">
          <textarea name="iReason " rows="4 " id="iReason" class="form-control iReason"></textarea>
        </div>
      </div>
    </div>
    
  </div>
  <a class="btn btn-link CancelEdits">Cancel</a>
</div>

Answer 3

这是您的解决方案

div.main { 
    padding-top: 20px; 
}
div.saveReason {
    display: inline;
    background-color: #fff3cd;
    border: solid 1px #ffeeba;
    border-bottom-color: #fff3cd;
    padding-bottom: 20px;
    padding-top: 6px;
    z-index: 1;
}
div.saveReasonDetail {
   position: inherit;
}

.SaveEdits { 
margin-right: 0 !important
}
.CancelEdits { 
background-color: purple !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main">
    <a class="btn btn-primary mr-1 SaveEdits">Save</a>
    <div class="saveReason"><a href="#" class="btn btn-secondary SaveReason"">Reason</a></div>
    <a class="btn btn-link ml-1 CancelEdits">Cancel</a>
    <div class="alert alert-warning mt-2 saveReasonDetail">
        <div class="form-group viReason">
            <div class="validator-container">
                <textarea name="iReason" rows="4" id="iReason" class="form-control iReason"></textarea>
            </div>
        </div>
    </div>
</div>