html - 如何使用 bootstrap 将 3 个图像内联居中？

Question

因为我一直在为我的 javascript 类制作一个页面 webapps，所以我认为将它们放在一起存储并将它们全部链接起来是一个不错的主意。

与 android 或 ios 类似，我有一个页面，其中包含几个用于链接到应用程序的图标。我已经能够按照我的意愿将它们居中，但我遇到了一些障碍。我面临的问题是如何正确地缩放它们。我不希望它们跨越整个网页。

目前我的 html 如下所示:

<div class="container-fluid">
    <div class="row">
        <div class="content col-xs-4">
            <a href="./flickr" class="img responsive"> <img alt="Flickr" style="height: 100%; width: 100%; display: block;" src="css/img/flickr.png" data-holder-rendered="true"> </a>
        </div>
        <div class="content col-xs-4">
            <a href="./notepad" class="img responsive"> <img alt="Notepad" style="height: 100%; width: 100%; display: block;" src="css/img/notepad.png" data-holder-rendered="true"> </a>
        </div>
        <div class="content col-xs-4">
            <a href="http://aug.ie" class="img responsive"> <img alt="Url Shortener" style="height: 100%; width: 100%; display: block;" src="css/img/link.png" data-holder-rendered="true"> </a>
        </div>          
    </div>
</div>

如果将来我创建更多应用程序时，我希望能够相当轻松地在此页面上添加图标和指向它的链接。 bootstrap 是否包含调整列大小的方法，或者我应该调整行的大小？

我目前身处陌生领域，因此我们将不胜感激。谢谢!

Answer 1

我不太确定你为什么使用这个:

style="height: 100%; width: 100%; display: block;"  

这是多余的，因为 bootstrap 使用 img-responsive 类开箱即用。但是在您的代码示例中，您编写了:img responsive 而不是 img-responsive

你是这样说的:

I do not wish to have them span the entire webpage.

如果您使用 container，它将包含 12 列网格中的所有元素。如果您使用 container-fluid，它会跨越整个网页。

在我的示例中，我使用了 col-sm-4 。只要您的页面为 768 像素及以上，它就会内联 3 列。如果您想在手机上使用 3 列，请使用 col-xs-4 。但始终确保您总共得到 12 个。

试试这个:

<div class="container">
        <div class="row">
            <div class="content col-sm-4">
                <a href="./flickr" class="img-responsive"> <img alt="Flickr"  src="css/img/flickr.png" data-holder-rendered="true"> </a>
            </div>
            <div class="content col-sm-4">
                <a href="./notepad" class="img-responsive"> <img alt="Notepad"  src="css/img/notepad.png" data-holder-rendered="true"> </a>
            </div>
            <div class="content col-sm-4">
                <a href="http://aug.ie" class="img-responsive"> <img alt="Url Shortener"  src="css/img/link.png" data-holder-rendered="true"> </a>
            </div>          
        </div>
    </div>