html - 使用行和列 Bootstrap

Question

因此，我正在尝试制作此框以容纳一些文本和一些 img 背景，但框不会像它们在小屏幕上应有的那样对齐。

我尝试了一些方法，但文本不会在不破坏对齐的情况下在按钮上对齐

CSS:

.bigbox {
 text-align: center;
  padding: 80px 40px;
}
.bigbox .bigbox-title {

  text-align: left;
  font-size: 28px;
  color: #fff;
}

.bigbox .bigbox-text {
  text-align: left;
  font-size: 18px;
  color: #fff;
  opacity: .85;
  margin-bottom: 20px;
}
.smallbox {
 text-align: center;
  padding: 80px 40px;
}
.smallbox.smallbox-title {

  text-align: left;
  font-size: 28px;
  color: #fff;
}
.smallbox.smallbox-text {
  text-align: left;
  font-size: 18px;
  color: #fff;
  opacity: .85;
  margin-bottom: 20px;
}

HTML

  <div class="full-width-container">
        <div class="row no-space-row ">
            <div class="col-sm-6 bg-color-base">
                <div class="bigbox ">
                    <h2 class="bigbox-title">BOX 1</h2>
                    <p class="bigbox-text">DESCRIPTION</p>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="smallbox bg-color-purple ">
                    <h2 class="smallbox-title">BOX 1</h2>
                    <p class="smallbox-text">DESCRIPTION</p>
                </div>
                 <div class="smallbox bg-color-purple-dark ">
                    <h2 class="smallbox-title">BOX 1</h2>
                    <p class="smallbox-text">DESCRIPTION</p>
                </div>  
            </div>
        </div>
    </div>

Answer 1

这里的关键是父 div 上的 display:flex。这迫使两个子 div 具有相同的高度。

我已经从第二个 div 中移除填充以将其移近大框，然后 position:absoluted 大框标题到 div 的底部.

我还尝试了一些内边距来帮助进行样式设置 - 但还没有将其样式设置为看起来像上图一样。

.row {
  display:flex;
}
.bg-color-base {
  background:red;
}
.bg-color-base + div{
  padding:0;
}
.bg-color-purple {
  background:purple;
}
.bg-color-purple-dark {
  background:blue;
}
.bigbox {
 text-align: center;
  padding: 40px;
  position:absolute;
  bottom:0;
}
.bigbox .bigbox-title {

  align-self: flex-end;
  text-align: left;
  font-size: 28px;
  color: #fff;
}

.bigbox .bigbox-text {
  text-align: left;
  font-size: 18px;
  color: #fff;
  opacity: .85;
  margin-bottom: 20px;
}
.smallbox {
 text-align: center;
  padding: 160px 40px 10px;
}
.smallbox.smallbox-title {

  text-align: left;
  font-size: 28px;
  color: #fff;
}
.smallbox.smallbox-text {
  text-align: left;
  font-size: 18px;
  color: #fff;
  opacity: .85;
  margin-bottom: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="full-width-container">
        <div class="row no-space-row ">
            <div class="col-xs-6 bg-color-base">
                <div class="bigbox ">
                    <h2 class="bigbox-title">BOX 1</h2>
                    <p class="bigbox-text">DESCRIPTION</p>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="smallbox bg-color-purple ">
                    <h2 class="smallbox-title">BOX 2</h2>
                    <p class="smallbox-text">DESCRIPTION</p>
                </div>
                 <div class="smallbox bg-color-purple-dark ">
                    <h2 class="smallbox-title">BOX 3</h2>
                    <p class="smallbox-text">DESCRIPTION</p>
                </div>  
            </div>
        </div>
    </div>