在bootstrap中的列的样式

Question

我试图在bootstrap中设置两个列的样式，因此它们具有相同的高度，它们之间有一个小的间隙，它们也有背景颜色。

Boxes have the same row height and desired gap but the background doesn't stretch to the whole height

我设法将css应用于相同的高度，但很难将颜色应用到背景中。

有什么想法吗？提前谢谢！

＆＃13;

＆＃13;

<div class="form">
    <form action="/" method="post">
        <div class="top-row">
            <div class="field-wrap">
                <label class="active">
                    Win Chance
                </label>

                <input id="winc" value="49.5" type="text" oninput="wc(this);" autocomplete="off" />
            </div>

            <div class="field-wrap">
                <label class="active">
                    Payout
                </label>
                <input id="payc" value="2" type="text" oninput="pc(this);" autocomplete="off" />
            </div>
        </div>
        <button type="submit" class="button">Get Started</button>
    </form>
</div>

＆＃13;

＆＃13;

＆＃13;

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;

}

.row-eq-height > [class*='col-'] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

}

.white-box {
  padding: 25px;
  -webkit-box-shadow: 0px 10px 23px -10px rgba(0, 0, 0, 0.43);
  -moz-box-shadow: 0px 10px 23px -10px rgba(0, 0, 0, 0.43);
  -ms-box-shadow: 0px 10px 23px -10px rgba(0, 0, 0, 0.43);
  -o-box-shadow: 0px 10px 23px -10px rgba(0, 0, 0, 0.43);
  box-shadow: 0px 10px 23px -10px rgba(0, 0, 0, 0.43);
  background-color: red;
  margin-bottom: 25px;
 
}