相关疑难解决方法(0)

如何使Bootstrap列的高度相同？

我正在使用Bootstrap.如何将三根柱子制成相同的高度？

这是问题的屏幕截图.我希望蓝色和红色的列与黄色列的高度相同.

三个自举列,中心列长于其他两列

这是代码:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
    <div class="col-xs-4 panel" style="background-color: red">
        some content
    </div>
    <div class="col-xs-4 panel" style="background-color: yellow">
        catz
        <img width="100" height="100" src="https://lorempixel.com/100/100/cats/">
    </div>
    <div class="col-xs-4 panel" style="background-color: blue">
        some more content
    </div>
</div>
</div>

Run Code Online (Sandbox Code Playgroud)

css twitter-bootstrap

Ric*_*ard

2017 06-24

919
推荐指数

16
解决办法

80万
查看次数

Flexbox包装Safari中第一行的最后一列

在Safari和其他一些基于iOS的浏览器中查看时,第一行的最后一列被包装到下一行.

苹果浏览器:

Chrome /其他:

码:

.flexthis {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flexthis .col-md-4 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

Run Code Online (Sandbox Code Playgroud)

<div class="row flexthis">
  <div class="col-md-4 col-sm-6 text-center">
    <div class="product">
      <img src="img.jpg" alt="" class="img-responsive">
      <h3>Name</h3>
      <p>Description</p>
    </div>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

css css3 flexbox twitter-bootstrap twitter-bootstrap-3

Dom*_*kN.

2018 06-06

61
推荐指数

4
解决办法

4万
查看次数