Question

我正在尝试设置网站的一部分，以便在图片的另一侧显示一列文本，一个长垂直图片和另一列文本。我已经能够实现我想要的外观，但只能使用负上边距（本例中未显示）。

我试过的代码就在这里

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

Answer 1

您不需要额外的行，因为新行将在上一行下方创建一个新块。它是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

3列引导网格布局麻烦

1 个答案: