Bootstrap 全角行，每边都有照片和文字

Question

我想要一行照片，该照片占据了该列的整个宽度和高度，并在其一侧添加一个段落 - 如下所示。我似乎无法掌握它的窍门，尤其是当屏幕变成 smaller/mobile 一切都变得一团糟时。

有人可以指导我吗？

我在这里遇到了一个工作示例：http://kallyas.net/demo/ 向下滚动到 "truly multi purpose"。

我的代码：

  <div class="row">
    <div class="col-sm-4">
            <div class="img-box">
                <img src="images/about2.jpg" alt="about" class="img-responsive">
            </div><!-- end img box -->      
            </div>

  <div class="col-sm-8">
     <div id="about-text">
             <p id="demo">Malta 5D  is a new generation theatre where you feel the “real” emotions of the movie. In a short time, you may explore the colourful and impressive episodes of the Maltese history and culture, magnified with 3D film, moving seats, water spray, air blasts and leg ticklers.  A unique experience for all ages!  An exhibition of works by local artists will be on display in the foyer.</p>
       </div><!-- end about text-->

  </div><!-- end col -->
</div><!-- end row -->

Answer 1

实现以下内容的最佳方法是在 css.

中使用 vh 或 "view height" 属性

例如，如果添加到图像 div 的 class 是 'image'。代码如下：

.image{
    height:100vh;
}

显然它的位置是相对于网页的，因此更好的更新代码片段会给出更好的主意。

Answer 2

已更新

查看演示 here

试试这个：

HTML:

<div class="row row-height">
  <div class="col-sm-4 col-custom pr0">
    <div class="img-box">
      <img src="http://agrofields.cmsmasters.net/wp-content/uploads/2014/11/bg-03.jpg" alt="about" class="img-responsive">
    </div>
    <!-- end img box -->
  </div>

  <div class="col-sm-8 col-custom">
    <div id="about-text">
      <p id="demo">Malta 5D is a new generation theatre where you feel the “real” emotions of the movie. In a short time, you may explore the colourful and impressive episodes of the Maltese history and culture, magnified with 3D film, moving seats, water spray, air
        blasts and leg ticklers. A unique experience for all ages! An exhibition of works by local artists will be on display in the foyer.</p>
    </div>
    <!-- end about text-->

  </div>
  <!-- end col -->
</div>
<!-- end row -->

CSS:

.row-height {
  display: flex;
}

.pr0 {
  padding-right: 0;
}

.col-custom {
  border: 1px solid blue;
}

.img-box {
  display: inline-flex;
  width: 100%;
  height: 100%;
}

.img-box img {
  object-fit: cover
}

Bootstrap 全角行，每边都有照片和文字

Bootstrap Full-width Row With Photo & Text On Each Side

twitter-bootstrap

row

photo

responsive