html - Bootstrap 中的空白选项卡

Question

我正在尝试实现与所附图片类似的布局。它看起来不错，在浏览器中显示时也符合我的要求，但是当我在移动/平板设备上测试时，p 标签的间距最终没有正确显示——我认为这是因为我在我的代码中使用了硬编码宽度span 标签和 p 标签占用多于一行。

是否可以响应式实现附图布局？如果是这样，我该怎么做？

我曾尝试使用 % 和 EM 代替 px，结果相似。

到目前为止我写的 HTML 是:

         <h2>Lorem Ipsum </h2>  
    <p>
        <span style="display:inline-block; width: 50px;"></span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.
    </p>
    <p>
        <span style="display:inline-block; width: 100px;"></span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.
    </p>
    </br>
    <h4>
       <span style="display:inline-block; width: 200px;"></span>           
        or
    </h4>
    </br>
    <p>
        <span style="display:inline-block; width: 50px;"></span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat
    </p>
    <p>
        <span style="display:inline-block; width: 100px;"></span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.
    </p>
    </br>

    <h2>
        <span style="display:inline-block; width: 550px;"></span>
        Lorem Ipsum
    </h2>
    <p>
        <span style="display:inline-block; width: 600px;"></span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. ipsum dolor sit amet, consectetur adipiscing elit. Curabitur 
    </p>
    <p>     
    <span style="display:inline-block; width: 663px;"></span>
    Lorem Ipsum
    </p>
    <p>
        <span style="display:inline-block; width: 650px;"></span>
        Lorem ipsum dolor sit amet  
    </p>

Answer 1

首先，你最好走这条路来实现类似于你想要的东西:

.indent-1 {
  margin-left: 2.5%;
}
.indent-2 {
  margin-left: 5%;
}
.indent-3 {
  margin-left: 7.5%;
}
.indent-4 {
  margin-left: 10%;
}
.indent-5 {
  margin-left: 12.5%;
}
.indent-6 {
  margin-left: 15%;
}
.indent-7 {
  margin-left: 17.5%;
}
.indent-8 {
  margin-left: 20%;
}
.indent-9 {
  margin-left: 22.5%;
}

<h2>Lorem Ipsum </h2> 
<p class="indent-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.</p>
<p class="indent-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.</p>
<h4 class="indent-3">or</h4>
<p class="indent-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat</p>
<p class="indent-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.</p>
<h2 class="indent-6">Lorem Ipsum</h2>
<p class="indent-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. ipsum dolor sit amet, consectetur adipiscing elit. Curabitur</p>
<p class="indent-8">Lorem Ipsum</p>
<p class="indent-9">Lorem ipsum dolor sit amet</p>

使用 LESS 的 CodePen:http://codepen.io/anon/pen/MweYma使用 CSS 的 JSFiddle:https://jsfiddle.net/c80p3pyx/1/

如果您需要确保您的段落不换行，只需添加

p { white-space: nowrap; }

到您的 CSS。这样您的段落将始终保持在一行中，但不适合屏幕宽度的行将导致浏览器显示(或至少使其可用)水平滚动条，几乎在所有情况下您都希望避免这种情况。 “太长”段落的唯一其他选择是缩短文本或使用较小的字体。