Bootstrap 响应式弹性框布局实例 - 图文排版

Bootstrap Flexbox Layout Examples 包含3个布局：缺省模式（文字在图片上面）、文字描述和图片垂直居中、文字和图片底部对齐。

bootstrap, flexbox

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3078
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  margin: 0;
}

.page-header {
  background-color: #dd4814;
  color: white;
  margin-top: 0 !important;
  text-align: center;
  padding: 7.5% 0;
}

footer {
  background-color: #dd4814;
  text-align: center;
  color: white;
  padding: 2.5%;
}
footer a {
  color: white;
  border-bottom: 1px dotted white;
}
footer a:hover, footer a:active, footer a:focus {
  color: white;
  border-bottom: 1px solid white;
  text-decoration: none;
}

.text-picture {
  padding-top: 5%;
  padding-bottom: 5%;
}
.text-picture.text-picture--gray-bg {
  background-color: #EEE;
}
.text-picture .text-picture__text h2 {
  margin-top: 0;
}
@media (min-width: 768px) {
  .text-picture .text-picture__text p:last-child {
    margin-bottom: 0;
  }
}
.text-picture .text-picture__picture {
  text-align: center;
}
.text-picture .text-picture__picture img {
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .row--flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .row--flex .row--flex__col {
    -webkit-align-self: flex-start;
        -ms-flex-item-align: start;
            align-self: flex-start;
  }
  .row--flex .row--flex__col--center {
    -webkit-align-self: center;
        -ms-flex-item-align: center;
            align-self: center;
  }
  .row--flex .row--flex__col--bottom {
    -webkit-align-self: flex-end;
        -ms-flex-item-align: end;
            align-self: flex-end;
  }
}

HTML

<div class="text-picture">
  <div class="container">
    <div class="row">
      <div class="col-sm-6 text-picture__text">
        <h2>Default Layout <small>without Flexbox</small></h2>
        <p>
          Ut sed congue massa. Cras eu turpis lacinia, ultricies ipsum fermentum, consectetur ipsum. Integer vestibulum a nunc noipsum. Integer vestibulum a nunc non facilisis.
        </p>
      </div>
      <div class="col-sm-6 text-picture__picture">
        <img src="https://placehold.it/640x340/?text=Image" alt="Image" class="img-responsive" />
      </div>
    </div>
  </div>
</div>

<div class="text-picture text-picture--gray-bg">
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-sm-push-6 text-picture__text">
        <h2>Default Layout <small>without Flexbox</small></h2>
        <p>
          Ut sed congue massa. Cras eu turpis lacinia, ultricies ipsum fermentum, consectetur ipsum. Integer vestibulum a nunc noipsum. Integer vestibulum a nunc non facilisis.
        </p>
      </div>
      <div class="col-sm-6 col-sm-pull-6 text-picture__picture">
        <img src="https://placehold.it/640x340/?text=Image" alt="Image" class="img-responsive" />
      </div>
    </div>
  </div>  
</div>

<div class="text-picture">
  <div class="container">
    <div class="row row--flex">
      <div class="col-sm-6 row--flex__col--center text-picture__text">
        <h2>Center Aligned <small>with Flexbox</small></h2>
        <p>
          Ut sed congue massa. Cras eu turpis lacinia, ultricies ipsum fermentum, consectetur ipsum. Integer vestibulum a nunc noipsum. Integer vestibulum a nunc non facilisis.
        </p>
      </div>
      <div class="col-sm-6 text-picture__picture">
        <img src="https://placehold.it/640x340/?text=Image" alt="Image" class="img-responsive" />
      </div>
    </div>
  </div>
</div>

<div class="text-picture text-picture--gray-bg">
  <div class="container">
    <div class="row row--flex">
      <div class="col-sm-6 row--flex__col--center col-sm-push-6 text-picture__text">
        <h2>Center Aligned <small>with Flexbox</small></h2>
        <p>
          Ut sed congue massa. Cras eu turpis lacinia, ultricies ipsum fermentum, consectetur ipsum. Integer vestibulum a nunc noipsum. Integer vestibulum a nunc non facilisis.
        </p>
      </div>
      <div class="col-sm-6 col-sm-pull-6 text-picture__picture">
        <img src="https://placehold.it/640x340/?text=Image" alt="Image" class="img-responsive" />
      </div>
    </div>
  </div>
</div>

<div class="text-picture">
  <div class="container">
    <div class="row row--flex">
      <div class="col-sm-6 row--flex__col--bottom text-picture__text">
        <h2>Bottom Aligned <small>with Flexbox</small></h2>
        <p>
          Ut sed congue massa. Cras eu turpis lacinia, ultricies ipsum fermentum, consectetur ipsum. Integer vestibulum a nunc noipsum. Integer vestibulum a nunc non facilisis.
        </p>
      </div>
      <div class="col-sm-6 text-picture__picture">
        <img src="https://placehold.it/640x340/?text=Image" alt="Image" class="img-responsive" />
      </div>
    </div>
  </div>
</div>

<div class="text-picture text-picture--gray-bg">
  <div class="container">
    <div class="row row--flex">
      <div class="col-sm-6 row--flex__col--bottom col-sm-push-6 text-picture__text">
        <h2>Bottom Aligned <small>with Flexbox</small></h2>
        <p>
          Ut sed congue massa. Cras eu turpis lacinia, ultricies ipsum fermentum, consectetur ipsum. Integer vestibulum a nunc noipsum. Integer vestibulum a nunc non facilisis.
        </p>
      </div>
      <div class="col-sm-6 col-sm-pull-6 text-picture__picture">
        <img src="https://placehold.it/640x340/?text=Image" alt="Image" class="img-responsive" />
      </div>
    </div>
  </div>
</div>

<footer>
    <p>By Dan Stuart</p>
</footer>

Bootstrap Flexbox Layout Examples 包含3个布局：缺省模式（文字在图片上面）、文字描述和图片垂直居中、文字和图片底部对齐。

bootstrap, flexbox

编辑器支持Emmet

快捷键

Bootstrap Flexbox Layout Examples 包含3个布局：缺省模式（文字在图片上面）、文字描述和图片垂直居中、文字和图片底部对齐。

bootstrap, flexbox

使用jQuery/Bootstrap/dataTables实现的多功能响应式表格控件

一款响应式CSS3网格布局模板（带@support特性查询）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：