引导程序图标与标题在一个级别上对齐

Question

我需要使用引导程序创建布局，但我正在努力对齐图标(如图像所示(。它应该没有左边距，并且与文章标题处于同一级别。我分别尝试了图标和其他内容的不同容器，但没有成功。

现在的代码：

<div class="container">
        <span id="article"><span class="glyphicon glyphicon-list-alt"></span></span>
        <div class="col-xs-offset-1">
        <h2>Article title</h2>
            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
        <button id="button" class="btn btn-lg">Sign Up</button>
        </div></div>

布局图像我怎样才能做到这一点？

Answer 1

由于您尚未发布CSS，因此很难准确显示，但请尝试负边距。 我不知道 bootstrap 是否有内置的类，因此您可能需要根据窗口大小制作一个具有正确不同数量的边距的类，因为您的偏移量会根据窗口大小而变化。 基本上，您需要与偏移中使用的完全相同的边距量，但在跨度上为负。

    <div class="container">
    <div class="col-xs-offset-1">
    <h2><span id="article" style="margin-left:-20px"><span class="glyphicon glyphicon-list-alt"></span></span> Article title</h2>
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
    <button id="button" class="btn btn-lg">Sign Up</button>
    </div></div>

Answer 2

试试这段代码，它划分网格并在第一个网格上显示图标：

<div class="container">
  <div class="col-md-2">
    <h3><i class="glyphicon glyphicon-list-alt"></i></h3>
  </div>
  <div class="col-xs-10">
    <h2>Article title</h2>
        <p>Paragraph</p>
    <button id="button" class="btn btn-lg">Sign Up</button>
  </div>
</div>