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>

将来如果我创建更多应用程序，我希望在此页面上添加图标并链接到相当容易的时间。引导程序是否包含调整列大小的方法，或者我是否应该调整行的大小？

我目前处于不熟悉的领域，所以任何帮助都会受到赞赏。谢谢！

Answer 1

我不确定你为什么使用它：

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

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

你这么说：

我不希望他们跨越整个网页。

如果您使用container，则它包含12列网格中的所有项目。如果您使用container-fluid，则会覆盖整个网页。

在我的例子中，我使用了col-sm-4。只要你的页面是768px及以上，这将使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>

Answer 2

尝试以下方法：

.row li {
  width: 33.3%;
  float: left;
}

img {
  border: 0 none;
  display: inline-block;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

<div class="row">
  <div id="small-img" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 center">
    <ul>
      <li>
        <img src="http://placehold.it/150x100" class="img-responsive inline-block" alt="Responsive image" />
      </li>
      <li>
        <img src="http://placehold.it/150x100" class="img-responsive inline-block" alt="Responsive image" />
      </li>
      <li>
        <img src="http://placehold.it/150x100" class="img-responsive inline-block" alt="Responsive image" />
      </li>
    </ul>
  </div>
</div>

如何将3个图像内联到自举中心？

2 个答案: