相关疑难解决方法(0)

与Bootstrap 3垂直对齐

我正在使用Twitter Bootstrap 3,当我想垂直对齐时我遇到问题div,例如 - JSFiddle链接:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

Bootstrap中的网格系统float: left不使用display:inline-block,因此该属性vertical-align不起作用.我尝试使用margin-top它来修复它,但我认为这对于响应式设计来说不是一个好的解决方案.

html css css3 twitter-bootstrap twitter-bootstrap-3

860
推荐指数
16
解决办法
140万
查看次数

标签 统计

css ×1

css3 ×1

html ×1

twitter-bootstrap ×1

twitter-bootstrap-3 ×1