两行内col的间距

Question

我在父行的一列中有2行col-2。父行的另一列包含一个jQuery内联日历小部件。

因此：

<div class="card">
            <div class="row">
                <div class="col-12">
                    <h3>Booking New</h3>


                    <div class="div-block-92">
                        <div class="div-block-93">
                            <div class="div-block-94">
                                <div class="row">
                                    <div class="col-3">
                                        <div id="datepicker"></div>
                                    </div>
                                    <div class="col-9">
                                        <div class="text-block-44">Appointment slots for March 1, 2018</div>
                                        <div class="div-block-95">
                                            <div class="columns-7 row">
                                                <div class="col-2">
                                                    <div class="div-block-96">
                                                        <div>10.00 am</div>
                                                        <div>Available</div>
                                                        <a href="#">Select</a>
                                                    </div>
                                                </div>
                                                <div class="col-2">
                                                    <div class="div-block-121">
                                                        <div>10.30 am</div>
                                                        <div>Reserved</div>
                                                        <a href="#">-</a>
                                                    </div>
                                                </div>
                                                <div class="col-2">
                                                    <div class="div-block-96">
                                                        <div>11.00 am</div>
                                                        <div>Available</div>
                                                        <a href="#">Select</a>
                                                    </div>
                                                </div>
                                                <div class="col-2">
                                                    <div class="div-block-96">
                                                        <div>11.30 am</div>
                                                        <div>Available</div>
                                                        <a href="#">Select</a>
                                                    </div>
                                                </div>
                                                <div class="col-2">
                                                    <div class="div-block-96">
                                                        <div>12.00 pm</div>
                                                        <div>Available</div>
                                                        <a href="#">Select</a>
                                                    </div>
                                                </div>
                                                <div class="col-2">
                                                    <div class="div-block-96">
                                                        <div>12.30 pm</div>
                                                        <div>Available</div>
                                                        <a href="#">Select</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="div-block-95">
                                                <div class="columns-7 row">
                                                    <div class="col-2">
                                                        <div class="div-block-96">
                                                            <div>1.00 pm</div>
                                                            <div>Available</div>
                                                            <a href="#">Select</a>
                                                        </div>
                                                    </div>
                                                    <div class="col-2">
                                                        <div class="div-block-96">
                                                            <div>1.30 pm</div>
                                                            <div>Available</div>
                                                            <a href="#">Select</a>
                                                        </div>
                                                    </div>
                                                    <div class="col-2">
                                                        <div class="div-block-96">
                                                            <div>2.00 pm</div>
                                                            <div>Available</div>
                                                            <a href="#">Select</a>
                                                        </div>
                                                    </div>
                                                    <div class="col-2">
                                                        <div class="div-block-121">
                                                            <div>2.30 pm</div>
                                                            <div>Reserved</div>
                                                            <a href="#">-</a>
                                                        </div>
                                                    </div>
                                                    <div class="col-2">
                                                        <div class="text-block-45">3.00 pm</div>
                                                        <div>Not Avail</div>
                                                    </div>
                                                    <div class="col-2">
                                                        <div class="text-block-46">3.30 pm</div>
                                                        <div>Not Avail</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

它不能正确渲染，如下所示：

正在使用的CSS如下

/* Booking New */


.div-block-45 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.div-block-46 {
  padding: 15px 30px 25px;
}

.div-block-92 {
  padding-right: 30px;
  padding-bottom: 20px;
  padding-left: 30px;
}

.div-block-93 {
  border: 1px solid #bbb;
}

.div-block-94 {
  padding: 15px 10px;
}



.columns-7 {
  text-align: center;
}

.div-block-95 {
  margin-bottom: 6px;
}

.column-6 {
  border: 1px none #bbb;
}

.div-block-96 {
  margin-left: 3px;
  padding-top: 5px;
  padding-bottom: 5px;
  border: 2px solid #1cad39;
}

.div-block-121 {
  margin-left: 3px;
  padding-top: 5px;
  padding-bottom: 5px;
  border: 2px solid #d85339;
}

.text-block-44 {
  padding-bottom: 15px;
  border-style: none;
  border-width: 0px 0px 1px;
  border-color: #5c5c5c #5c5c5c #000;
  font-size: 17px;
}

.columns-7 {
  text-align: center;
}

我需要做些什么来使列稍小些以使此布局适合整体布局？