使用 Bootstrap 垂直对齐单元格

【问题标题】：Vertical alignment of cells with Bootstrap使用 Bootstrap 垂直对齐单元格
【发布时间】：2017-07-16 19:54:53
【问题描述】：

我从来都不擅长 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 ">$32</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 ">$32</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 ">$44</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 ">$32</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 ">$1,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 ">$33</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 ">$44</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 ">$44</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 ">$44</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 ">$44</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 ">$44</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 ">$44</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 ">$444</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 ">$2,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 ">$1,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 ">$32</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;
    }
}

谢谢

【问题讨论】：

  • 你不能要求别人为你做你的工作......你已经找到了解决问题的方法：你为第 4 个单元格编写了 CSS。您可以询问有关如何使您的 CSS 更有条理以免出现此类问题的问题，或者使用 flexbox 寻求特定的解决方案。问题应该可供其他用户重复使用。你的不是。

标签： css twitter-bootstrap vertical-alignment


【解决方案1】：

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

将此代码添加到您的 CSS：

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

See updated fiddle

查看下面的 sn-p：

.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 ">$32</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 ">$32</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 ">$44</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 ">$32</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 ">$1,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 ">$33</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 ">$44</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 ">$44</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 ">$44</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 ">$44</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 ">$44</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 ">$44</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 ">$444</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 ">$2,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 ">$1,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 ">$32</span>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

  • 感谢冷水机！黄金。
【解决方案2】：

您也可以使用flex version of bootstrap。

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

demo&sn-p 

.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 ">$32</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 ">$32</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 ">$44</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 ">$32</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 ">$1,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 ">$33</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 ">$44</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 ">$44</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 ">$44</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 ">$44</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 ">$44</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 ">$44</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 ">$444</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 ">$2,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 ">$1,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 ">$32</span>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

    猜你喜欢
    • 2016-08-07
    • 2011-07-30
    • 2020-05-27
    • 1970-01-01
    • 2018-08-15
    • 1970-01-01
    • 1970-01-01
    • 2014-05-06
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode