html - 3列引导网格布局麻烦

Question

我正在尝试设置网站的一个部分，使其包含一列文本、一张垂直的长图片，以及在图片另一侧的另一列文本。我已经能够实现我想要的外观，但只能通过使用负顶部边距(本例中未显示)。

我试过的代码在这里

http://www.bootply.com/3hKEyWGlJp

Answer 1

您不需要额外的行，因为新行会在前一行下方创建一个新 block 。这就是 CSS 网格的工作方式(在您的示例中为 Bootstrap)。只需将步骤 1/2 的内容放在左栏，div 放在中间栏，步骤 3/4 的内容放在右栏。

<div class="row">
    <div class="col-md-3 col-md-offset-1">
        <p class="lead text-left">Step 1: asdf asdf asdf </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit, dolor at..</p>

        <p class="lead">Step 2: Lorem ipsum dolor sit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit, dolor at</p>
    </div>

  <div class="col-md-3">
    <div class="phone"></div>
  </div>

  <div class="col-md-3">
    <p class="lead text-left">Step 3:Lorem ipsum dolor sit</p>
    <p>Start typing your address &amp; we will give you a list of options to choose from.</p>

    <p class="lead">Step 4: Lorem ipsum dolor sit</p>
    <p>dsadsdad sddasd saddsd dasdsada sdasds d ds ads dadsd dasd sada sdasdsdd sads dadsdda sdsada sdasdsd</p>
  </div>
</div>

示例:http://www.bootply.com/rCr1B4wiKD