ブートストラップボタンの後ろに背景色を配置する方法

debugcn 投稿 Dev

テリー

ボタンがクリックされたときに入力を表示させようとしていますが、ボタンと入力の両方の周囲全体に背景が必要です。現在、私のマークアップは次のようにレンダリングされます。

したがって、クリック理由の場合、基本的に、理由ボタンと入力の周囲に黄色（アラート警告）の背景が必要です。私のマークアップは次のようになります。

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）黄色の背景を理由ボタンの少し外側に広げたい（すでに配置されているボタン間の余白に影響を与えない）。

これは可能ですか？

更新：KareemDabbeetとChaseIngebritsonから有効な回答を得ました。Kareemは最初に回答としてマークされましたが、HTMLの専門家ではないため、Chaseが「同じコンテナ」について行ったコメントは重要だと思います。彼の答えも確認してください。

カリーム・ダビート

最初の質問の場合：

div.saveReasonDetail位置を編集して作成するだけinheritです：

div.saveReasonDetail {
    position: inherit;
}

ここで、の境界線の下部の色を編集しsaveReasonて、「saveReasonDetail」と同じにします。bg-color：

border-bottom-color: #FFF3CD

2番目の質問の場合：各ボタン間でm-2を同化するには、保存ボタンの右マージンを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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]