Bootstrap 单元格垂直对齐

Question

我和 CSS 相处得不好。谁能帮我重新设置这些 CSS 规则，以便示例中的前三天扩展到与第四天匹配。

https://jsfiddle.net/warwickf/zehjrzLh/2/

HTML

<div class="row">
    <div class="day weekDay">
        <label class="dayTitle" for="text">Mon Jun 5</label>
        <div class="details">
            <div data-placement="right" data-toggle="tooltip" title="" class="DailyLoanInterestShow row event">
                <div class="col-md-12">
                    <span class=" eventleft">Daily interest&nbsp;</span>
                    <span class="eventright "></span>
                </div>
            </div>
        </div>
    </div>
    <div class="day weekDay">
        <label class="dayTitle" for="text">Tue Jun 6</label>
        <div class="details">
            <div data-placement="right" data-toggle="tooltip" title="" class="DailyLoanInterestShow row event">
                <div class="col-md-12">
                    <span class=" eventleft">Daily interest&nbsp;</span>
                    <span class="eventright "></span>
                </div>
            </div>
        </div>
    </div>
    <div class="day weekDay">
        <label class="dayTitle" for="text">Wed Jun 7</label>
        <div class="details">
            <div data-placement="right" data-toggle="tooltip" title="Fortnightly" class="ExpenseShow row event">
                <div class="col-md-12">
                    <span class=" eventleft">Registration 1&nbsp;</span>
                    <span class="eventright "></span>
                </div>
            </div>
            <div data-placement="right" data-toggle="tooltip" title="" class="DailyLoanInterestShow row event">
                <div class="col-md-12">
                    <span class=" eventleft">Daily interest&nbsp;</span>
                    <span class="eventright "></span>
                </div>
            </div>
        </div>
    </div>
    <div class="day weekDay">
        <label class="dayTitle" for="text">Thu Jun 8</label>
        <div class="details">
            <div data-placement="right" data-toggle="tooltip" title="Fortnightly" class="ExpenseShow row event">
                <div class="col-md-12">
                    <span class=" eventleft">Water Rates&nbsp;</span>
                    <span class="eventright ">,000</span>
                </div>
            </div>
            <div data-placement="right" data-toggle="tooltip" title="Weekly" class="ExpenseShow row event">
                <div class="col-md-12">
                    <span class=" eventleft">Electricity&nbsp;</span>
                    <span class="eventright "></span>
                </div>
            </div>
            <div data-placement="right" data-toggle="tooltip" title="Fortnightly" class="ExpenseShow row event">
                <div class="col-md-12">
                    <span class=" eventleft">Internet&nbsp;</span>
                    <span class="eventright "></span>
                </div>
            </div>
            <div data-placement="right" data-toggle="tooltip" title="Weekly" class="ExpenseShow row event">
                <div class="col-md-12">
                    <span class=" eventleft">Mobile 1&nbsp;</span>
                    <span class="eventright "></span>
                </div>
            </div>
            <div data-placement="right" data-toggle="tooltip" title="Weekly" class="ExpenseShow row event">
                <div class="col-md-12">
                    <span class=" eventleft">Registration 1&nbsp;</span>
                    <span class="eventright "></span>
                </div>
            </div>
            <div data-placement="right" data-toggle="tooltip" title="Fortnightly" class="ExpenseShow row event">
                <div class="col-md-12">
                    <span class=" eventleft">Service/Repairs&nbsp;</span>
                    <span class="eventright "></span>
                </div>
            </div>
            <div data-placement="right" data-toggle="tooltip" title="Weekly" class="ExpenseShow row event">
                <div class="col-md-12">
                    <span class=" eventleft">Fuel&nbsp;</span>
                    <span class="eventright "></span>
                </div>
            </div>
            <div data-placement="right" data-toggle="tooltip" title="Fortnightly" class="ExpenseShow row event">
                <div class="col-md-12">
                    <span class=" eventleft">Fuel&nbsp;</span>
                    <span class="eventright "></span>
                </div>
            </div>
            <div data-placement="right" data-toggle="tooltip" title="Fortnightly" class="ExpenseShow row event">
                <div class="col-md-12">
                    <span class=" eventleft">Roadside Care&nbsp;</span>
                    <span class="eventright ">4</span>
                </div>
            </div>
            <div data-placement="right" data-toggle="tooltip" title="Weekly" class="IncomeShow row event">
                <div class="col-md-12">
                    <span class=" eventleft">Net Salary or Wages&nbsp;</span>
                    <span class="eventright ">,200</span>
                </div>
            </div>
            <div data-placement="right" data-toggle="tooltip" title="Weekly" class="IncomeShow row event">
                <div class="col-md-12">
                    <span class=" eventleft">Overtime&nbsp;</span>
                    <span class="eventright ">,000</span>
                </div>
            </div>
            <div data-placement="right" data-toggle="tooltip" title="" class="DailyLoanInterestShow row event">
                <div class="col-md-12">
                    <span class=" eventleft">Daily interest&nbsp;</span>
                    <span class="eventright "></span>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.42;
    border-radius: 15px;
}

.btn-round-lg {
    border-radius: 22.5px;
}

.btn-round {
    border-radius: 17px;
    margin: 5px 0 5px 0;
}

.btn-round-sm {
    border-radius: 15px;
}

.btn-round-xs {
    border-radius: 11px;
    padding-left: 10px;
    padding-right: 10px;
}

.day {
    width: 14%;
    min-height: 180px;
    padding-bottom: 50px;
    float: left;
    position: relative;
    border-bottom: 1px solid lightgray;
    border-top: 1px solid lightgray;
    border-left: 1px solid lightgray;
    padding: 5px 5px 50px 5px;
}

.eventleft {
    float: left;
}
.eventright {
    float: right;
}

.weekDay {
    background: lightyellow;
}

.weekEnd {
    background: lightgreen;
}

.event {
    padding: 3px 3px 3px 3px;
}

.dayTitle {
    width: 100%;
    border-bottom: 1px solid lightgray;
    padding: 3px 3px 3px 3px;
}

.DailyLoanInterestShow {
    color: gray;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 3px 6px 6px 3px;
}

.rowExpand {
    height: 100%;
}

@media (max-width: 1000px) {
    .day {
        width: 50%;
        border-bottom: 1px solid lightgray;
        border-top: 1px solid lightgray;
        border-left: 1px solid lightgray;
        border-right: 1px solid lightgray;
    }
}

@media (max-width: 600px) {
    .day {
        width: 90%;
        margin-left: 10px;
        border-bottom: 1px solid lightgray;
        border-top: 1px solid lightgray;
        border-left: 1px solid lightgray;
        border-right: 1px solid lightgray;
    }
}

谢谢

Answer 1

你可以使用flex box得到你想要的

将此代码添加到您的 css:

.row {
  display: flex;
  flex-wrap: wrap;
}

See updated fiddle

检查下面的代码段：

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.42;
  border-radius: 15px;
}

.btn-round-lg {
  border-radius: 22.5px;
}

.btn-round {
  border-radius: 17px;
  margin: 5px 0 5px 0;
}

.btn-round-sm {
  border-radius: 15px;
}

.btn-round-xs {
  border-radius: 11px;
  padding-left: 10px;
  padding-right: 10px;
}

.day {
  width: 14%;
  min-height: 180px;
  padding-bottom: 50px;
  float: left;
  position: relative;
  border-bottom: 1px solid lightgray;
  border-top: 1px solid lightgray;
  border-left: 1px solid lightgray;
  padding: 5px 5px 50px 5px;
}

.eventleft {
  float: left;
}

.eventright {
  float: right;
}

.weekDay {
  background: lightyellow;
}

.weekEnd {
  background: lightgreen;
}

.event {
  padding: 3px 3px 3px 3px;
}

.dayTitle {
  width: 100%;
  border-bottom: 1px solid lightgray;
  padding: 3px 3px 3px 3px;
}

.DailyLoanInterestShow {
  color: gray;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 3px 6px 6px 3px;
}

.rowExpand {
  height: 100%;
}

@media (max-width: 1000px) {
  .day {
    width: 50%;
    border-bottom: 1px solid lightgray;
    border-top: 1px solid lightgray;
    border-left: 1px solid lightgray;
    border-right: 1px solid lightgray;
  }
}

@media (max-width: 600px) {
  .day {
    width: 90%;
    margin-left: 10px;
    border-bottom: 1px solid lightgray;
    border-top: 1px solid lightgray;
    border-left: 1px solid lightgray;
    border-right: 1px solid lightgray;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="day weekDay">
    <label class="dayTitle" for="text">Mon Jun 5</label>
    <div class="details">
      <div data-placement="right" data-toggle="tooltip" title="" class="DailyLoanInterestShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Daily interest&nbsp;</span>
          <span class="eventright "></span>
        </div>
      </div>
    </div>
  </div>
  <div class="day weekDay">
    <label class="dayTitle" for="text">Tue Jun 6</label>
    <div class="details">
      <div data-placement="right" data-toggle="tooltip" title="" class="DailyLoanInterestShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Daily interest&nbsp;</span>
          <span class="eventright "></span>
        </div>
      </div>
    </div>
  </div>
  <div class="day weekDay">
    <label class="dayTitle" for="text">Wed Jun 7</label>
    <div class="details">
      <div data-placement="right" data-toggle="tooltip" title="Fortnightly" class="ExpenseShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Registration 1&nbsp;</span>
          <span class="eventright "></span>
        </div>
      </div>
      <div data-placement="right" data-toggle="tooltip" title="" class="DailyLoanInterestShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Daily interest&nbsp;</span>
          <span class="eventright "></span>
        </div>
      </div>
    </div>
  </div>
  <div class="day weekDay">
    <label class="dayTitle" for="text">Thu Jun 8</label>
    <div class="details">
      <div data-placement="right" data-toggle="tooltip" title="Fortnightly" class="ExpenseShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Water Rates&nbsp;</span>
          <span class="eventright ">,000</span>
        </div>
      </div>
      <div data-placement="right" data-toggle="tooltip" title="Weekly" class="ExpenseShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Electricity&nbsp;</span>
          <span class="eventright "></span>
        </div>
      </div>
      <div data-placement="right" data-toggle="tooltip" title="Fortnightly" class="ExpenseShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Internet&nbsp;</span>
          <span class="eventright "></span>
        </div>
      </div>
      <div data-placement="right" data-toggle="tooltip" title="Weekly" class="ExpenseShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Mobile 1&nbsp;</span>
          <span class="eventright "></span>
        </div>
      </div>
      <div data-placement="right" data-toggle="tooltip" title="Weekly" class="ExpenseShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Registration 1&nbsp;</span>
          <span class="eventright "></span>
        </div>
      </div>
      <div data-placement="right" data-toggle="tooltip" title="Fortnightly" class="ExpenseShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Service/Repairs&nbsp;</span>
          <span class="eventright "></span>
        </div>
      </div>
      <div data-placement="right" data-toggle="tooltip" title="Weekly" class="ExpenseShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Fuel&nbsp;</span>
          <span class="eventright "></span>
        </div>
      </div>
      <div data-placement="right" data-toggle="tooltip" title="Fortnightly" class="ExpenseShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Fuel&nbsp;</span>
          <span class="eventright "></span>
        </div>
      </div>
      <div data-placement="right" data-toggle="tooltip" title="Fortnightly" class="ExpenseShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Roadside Care&nbsp;</span>
          <span class="eventright ">4</span>
        </div>
      </div>
      <div data-placement="right" data-toggle="tooltip" title="Weekly" class="IncomeShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Net Salary or Wages&nbsp;</span>
          <span class="eventright ">,200</span>
        </div>
      </div>
      <div data-placement="right" data-toggle="tooltip" title="Weekly" class="IncomeShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Overtime&nbsp;</span>
          <span class="eventright ">,000</span>
        </div>
      </div>
      <div data-placement="right" data-toggle="tooltip" title="" class="DailyLoanInterestShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Daily interest&nbsp;</span>
          <span class="eventright "></span>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

您也可以使用 flex version of bootstrap .

库在这里：//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

demo & 片段

.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.42;
    border-radius: 15px;
}

.btn-round-lg {
    border-radius: 22.5px;
}

.btn-round {
    border-radius: 17px;
    margin: 5px 0 5px 0;
}

.btn-round-sm {
    border-radius: 15px;
}

.btn-round-xs {
    border-radius: 11px;
    padding-left: 10px;
    padding-right: 10px;
}

.day {
    width: 14%;
    min-height: 180px;
    padding-bottom: 50px;
    float: left;
    position: relative;
    border-bottom: 1px solid lightgray;
    border-top: 1px solid lightgray;
    border-left: 1px solid lightgray;
    padding: 5px 5px 50px 5px;
}

.eventleft {
    float: left;
}
.eventright {
    float: right;
}

.weekDay {
    background: lightyellow;
}

.weekEnd {
    background: lightgreen;
}

.event {
    padding: 3px 3px 3px 3px;
}

.dayTitle {
    width: 100%;
    border-bottom: 1px solid lightgray;
    padding: 3px 3px 3px 3px;
}

.DailyLoanInterestShow {
    color: gray;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 3px 6px 6px 3px;
}

.rowExpand {
    height: 100%;
}

@media (max-width: 1000px) {
    .day {
        width: 50%;
        border-bottom: 1px solid lightgray;
        border-top: 1px solid lightgray;
        border-left: 1px solid lightgray;
        border-right: 1px solid lightgray;
    }
}

@media (max-width: 600px) {
    .day {
        width: 90%;
        margin-left: 10px;
        border-bottom: 1px solid lightgray;
        border-top: 1px solid lightgray;
        border-left: 1px solid lightgray;
        border-right: 1px solid lightgray;
    }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="day weekDay">
    <label class="dayTitle" for="text">Mon Jun 5</label>
    <div class="details">
      <div data-placement="right" data-toggle="tooltip" title="" class="DailyLoanInterestShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Daily interest&nbsp;</span>
          <span class="eventright "></span>
        </div>
      </div>
    </div>
  </div>
  <div class="day weekDay">
    <label class="dayTitle" for="text">Tue Jun 6</label>
    <div class="details">
      <div data-placement="right" data-toggle="tooltip" title="" class="DailyLoanInterestShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Daily interest&nbsp;</span>
          <span class="eventright "></span>
        </div>
      </div>
    </div>
  </div>
  <div class="day weekDay">
    <label class="dayTitle" for="text">Wed Jun 7</label>
    <div class="details">
      <div data-placement="right" data-toggle="tooltip" title="Fortnightly" class="ExpenseShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Registration 1&nbsp;</span>
          <span class="eventright "></span>
        </div>
      </div>
      <div data-placement="right" data-toggle="tooltip" title="" class="DailyLoanInterestShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Daily interest&nbsp;</span>
          <span class="eventright "></span>
        </div>
      </div>
    </div>
  </div>
  <div class="day weekDay">
    <label class="dayTitle" for="text">Thu Jun 8</label>
    <div class="details">
      <div data-placement="right" data-toggle="tooltip" title="Fortnightly" class="ExpenseShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Water Rates&nbsp;</span>
          <span class="eventright ">,000</span>
        </div>
      </div>
      <div data-placement="right" data-toggle="tooltip" title="Weekly" class="ExpenseShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Electricity&nbsp;</span>
          <span class="eventright "></span>
        </div>
      </div>
      <div data-placement="right" data-toggle="tooltip" title="Fortnightly" class="ExpenseShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Internet&nbsp;</span>
          <span class="eventright "></span>
        </div>
      </div>
      <div data-placement="right" data-toggle="tooltip" title="Weekly" class="ExpenseShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Mobile 1&nbsp;</span>
          <span class="eventright "></span>
        </div>
      </div>
      <div data-placement="right" data-toggle="tooltip" title="Weekly" class="ExpenseShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Registration 1&nbsp;</span>
          <span class="eventright "></span>
        </div>
      </div>
      <div data-placement="right" data-toggle="tooltip" title="Fortnightly" class="ExpenseShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Service/Repairs&nbsp;</span>
          <span class="eventright "></span>
        </div>
      </div>
      <div data-placement="right" data-toggle="tooltip" title="Weekly" class="ExpenseShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Fuel&nbsp;</span>
          <span class="eventright "></span>
        </div>
      </div>
      <div data-placement="right" data-toggle="tooltip" title="Fortnightly" class="ExpenseShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Fuel&nbsp;</span>
          <span class="eventright "></span>
        </div>
      </div>
      <div data-placement="right" data-toggle="tooltip" title="Fortnightly" class="ExpenseShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Roadside Care&nbsp;</span>
          <span class="eventright ">4</span>
        </div>
      </div>
      <div data-placement="right" data-toggle="tooltip" title="Weekly" class="IncomeShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Net Salary or Wages&nbsp;</span>
          <span class="eventright ">,200</span>
        </div>
      </div>
      <div data-placement="right" data-toggle="tooltip" title="Weekly" class="IncomeShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Overtime&nbsp;</span>
          <span class="eventright ">,000</span>
        </div>
      </div>
      <div data-placement="right" data-toggle="tooltip" title="" class="DailyLoanInterestShow row event">
        <div class="col-md-12">
          <span class=" eventleft">Daily interest&nbsp;</span>
          <span class="eventright "></span>
        </div>
      </div>
    </div>
  </div>
</div>

Bootstrap 单元格垂直对齐

Vertical alignment of cells with Bootstrap

css

vertical-alignment

twitter-bootstrap