html - 使用 bootstrap 水平对齐 div 中的元素的推荐方法

Question

我希望元素并排放置，而不是彼此重叠。

当我说最好的方式时，我希望元素在您更改屏幕大小时不重叠。

这是我的 HTML:

<div class="container-fluid" style="text-align:center; background-color: #f6f6ff;">
    <div class="col-md-offset-1 col-sm-12 col-md-10" style="background-color: #f6f6ff;">
        <img src="media/subversion_logo-384x332.png" alt="Subversion" height="150" width="150">
        <h1>2</h1>
        <img src="media/github.png" alt="GitHub" height="150" width="150">
    </div>
</div>

这是它的外观图片:

Answer 1

现在您有一个 h1 分隔两个图像。由于默认情况下标题标签是 block 级元素，因此不可能将图像并排排列并用 h1 分隔它们。但是，如果您将每个图像/标题放在它们自己的列中，它们将排成一行:

<div class="container-fluid" style="text-align:center; background-color: #f6f6ff;">
    <div class="row">

        <div class="col-xs-6">
            <h1>1</h1>
            <img src="http://placehold.it/150x150" alt="Subversion" height="150" width="150">
        </div>

        <div class="col-xs-6">
            <h1>2</h1>
            <img src="http://placehold.it/150x150" alt="GitHub" height="150" width="150">
        </div>

        <div class="clearfix"></div>

  </div>
</div>

Bootply