使用 CSS 在 div 中创建 'bottom tab'？

Question

我正在尝试创建一系列 Bootstrap 列来模仿我得到的网站设计。

这些列的底部为蓝色边框，div 的边框更粗。边框几乎没有用，因为它会改变尺寸和可用的 space 所以我试图简单地在其中创建一个 div 以将 background-color 与 width:100% 一起使用，但事实并非如此似乎也可以。

谁能告诉我解决这个问题的最佳方法？

谢谢。

.featuredCatalog {
  border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border: 5px solid #00AEF0;
}
.shopTab {
  background-color: #00AEF0;
  width: 100%;
  min-height: 100%;
  margin: 0;
}

<div class="row">
  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <img class="img-responsive" src="https://placehold.it/191x131">
    <div class="shopTab">
      <h4>Shop Now</h4>
    </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <img class="img-responsive" src="https://placehold.it/191x131">
    <h4>Shop Now</h4>
  </div>

  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <img class="img-responsive" src="https://placehold.it/191x131">
    <h4>Shop Now</h4>
  </div>

  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <img class="img-responsive" src="https://placehold.it/191x131">
    <h4>Shop Now</h4>
  </div>

  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <img class="img-responsive" src="https://placehold.it/191x131">
    <h4>Shop Now</h4>
  </div>
</div>

Answer 1

这里的代码片段可以解决您的问题并创建如图所示的产品展示。

.shopTab {
  position:absolute;
  bottom:0;
  background-color: #00AEF0;
  width: 100%;
  height: 26%;
}

.product-display {
    position: relative;
    border-radius: 10px;
    border: 5px solid #00AEF0;
    margin: 10px auto;
    height: 160px;
    max-width: 160px;
}

.product-display img{
    display: block;
    width: 100%;
    height: 74%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <div class="product-display">
      <img class="img-responsive" src="https://placehold.it/191x131">
      <div class="shopTab">
        <h4>Shop Now</h4>
      </div>
    </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <div class="product-display">
      <img class="img-responsive" src="https://placehold.it/191x131">
      <div class="shopTab">
        <h4>Shop Now</h4>
      </div>
    </div>
  </div>

  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <div class="product-display">
      <img class="img-responsive" src="https://placehold.it/191x131">
      <div class="shopTab">
        <h4>Shop Now</h4>
      </div>
    </div>
  </div>

  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <div class="product-display">
      <img class="img-responsive" src="https://placehold.it/191x131">
      <div class="shopTab">
        <h4>Shop Now</h4>
      </div>
    </div>
  </div>

  <div class="col-xs-6 col-sm-4 col-lg-2 featuredCatalog">
    <div class="product-display">
      <img class="img-responsive" src="https://placehold.it/191x131">
      <div class="shopTab">
        <h4>Shop Now</h4>
      </div>
    </div>
  </div>
</div>

使用 CSS 在 div 中创建 'bottom tab'？

Create 'bottom tab' in div with CSS?

html

css

border

multiple-columns

twitter-bootstrap-3