Html 一行4个img响应引导_Html_Css_Twitter Bootstrap_Responsive Design

Html 一行4个img响应引导

html css twitter-bootstrap responsive-design

Html 一行4个img响应引导,html,css,twitter-bootstrap,responsive-design,Html,Css,Twitter Bootstrap,Responsive Design,我正在尝试向我的引导站点添加一行，其中包含四个通过img responsive属性调整大小的图像。我希望有以下外观： “桌面4列，平板电脑2列，手机1列” 为此，我使用了我在stackoverflow上找到的类“col-md-3 col-sm-6 col-xs-12” 我的代码如下所示： <div class="container download" id="downloads"> <h2>Downloads</h2> <p class=

我正在尝试向我的引导站点添加一行，其中包含四个通过img responsive属性调整大小的图像。我希望有以下外观： “桌面4列，平板电脑2列，手机1列” 为此，我使用了我在stackoverflow上找到的类“col-md-3 col-sm-6 col-xs-12”

我的代码如下所示：

<div class="container download" id="downloads">
    <h2>Downloads</h2>
    <p class="lead">Some Text.....</p>
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkT">
            <img style="width: 20%; height: 20%" alt="AltText" src="LinkToImage" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img style="width: 20%; height: 20%" alt="AltText" src="LinkToImage" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img style="width: 20%; height: 20%" alt="AltText" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img style="width: 20%; height: 20%" alt="AltText" src="LinkToImage" class="img-responsive">
        </a>
        </div>
    </div>
  </div>

<div class="container download" id="downloads">
    <h2>Downloads</h2>
    <p class="lead">Some Text.....</p>
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkT">
            <img alt="AltText" src="https://placehold.it/300" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img  alt="AltText" src="https://placehold.it/300" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img src="https://placehold.it/300" alt="AltText" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img alt="AltText" src="https://placehold.it/300" class="img-responsive">
        </a>
        </div>
    </div>
 </div>


下载
一些文本

我尝试了好几门课程，但都不管用。如果我用firebug检查站点，firebug显示，每个col div类使用页面的整个宽度，图像显示在一行中：(

感谢您的帮助

查看您的代码，行/列部分似乎没有问题…但是您使用的是内联样式来调整图像大小，这将覆盖

.responsive img

类，并且图像大小很差。如果您没有看到列按预期工作，请确保适当地包括引导css，并且您使用的是与类名相关的引导的正确版本。

.responsive img

是一个引导3类。如果您使用的是引导4，则需要使用

.img fluid

我有一个这样的工作示例：

<div class="container download" id="downloads">
    <h2>Downloads</h2>
    <p class="lead">Some Text.....</p>
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkT">
            <img style="width: 20%; height: 20%" alt="AltText" src="LinkToImage" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img style="width: 20%; height: 20%" alt="AltText" src="LinkToImage" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img style="width: 20%; height: 20%" alt="AltText" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img style="width: 20%; height: 20%" alt="AltText" src="LinkToImage" class="img-responsive">
        </a>
        </div>
    </div>
  </div>

<div class="container download" id="downloads">
    <h2>Downloads</h2>
    <p class="lead">Some Text.....</p>
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkT">
            <img alt="AltText" src="https://placehold.it/300" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img  alt="AltText" src="https://placehold.it/300" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img src="https://placehold.it/300" alt="AltText" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img alt="AltText" src="https://placehold.it/300" class="img-responsive">
        </a>
        </div>
    </div>
 </div>


下载
一些文本

请看这里：

有关bootstrap 4示例，请参见：

查看代码，行/列部分似乎没有问题……但是您使用内联样式来调整图像大小，这将覆盖

。响应img

类并调整图像大小。如果您没有看到列按预期工作，请确保适当地包含bootstrap css，并且您使用的是相对于类名的正确版本的引导程序。

。responsive img

是一个引导程序3类。如果您使用的是引导程序4，则需要使用

。img fluid

我有一个这样的工作示例：

<div class="container download" id="downloads">
    <h2>Downloads</h2>
    <p class="lead">Some Text.....</p>
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkT">
            <img style="width: 20%; height: 20%" alt="AltText" src="LinkToImage" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img style="width: 20%; height: 20%" alt="AltText" src="LinkToImage" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img style="width: 20%; height: 20%" alt="AltText" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img style="width: 20%; height: 20%" alt="AltText" src="LinkToImage" class="img-responsive">
        </a>
        </div>
    </div>
  </div>

<div class="container download" id="downloads">
    <h2>Downloads</h2>
    <p class="lead">Some Text.....</p>
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkT">
            <img alt="AltText" src="https://placehold.it/300" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img  alt="AltText" src="https://placehold.it/300" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img src="https://placehold.it/300" alt="AltText" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img alt="AltText" src="https://placehold.it/300" class="img-responsive">
        </a>
        </div>
    </div>
 </div>


下载
一些文本

请看这里：

有关bootstrap 4示例，请参见：

谢谢大家！kball引导我找到错误。。。我注意到我使用的是Bootstrap 2.3-.-，所以我更新到了版本4，删除了添加到图像中的内联样式，并更改了img响应img流体

现在它就像一个符咒：）再次感谢你们的帮助，我正在墙上的自动取款机前痛击我的头，因为我没有注意到我使用的是一个旧的引导版本

谢谢大家！kball把我引向错误。。。我注意到我使用的是Bootstrap 2.3-.-，所以我更新到了版本4，删除了添加到图像中的内联样式，并更改了img响应img流体

现在它就像一个符咒：）再次感谢你的帮助，我在墙上的自动取款机前磕头，因为我没有注意到我使用的是一个旧的引导版本

如果你能制作一个运行正常的小演示，让我们看到它的发生，那将非常有帮助。你的代码看起来不错，我唯一能想到的就是你的内联宽度和高度样式。他们会过度编写img响应类样式，这很可能会造成问题，具体取决于图像的尺寸。如果您可以制作一个功能性的小演示，以便我们看到它的发生，这将非常有用。你的代码看起来不错，我唯一能想到的就是你的内联宽度和高度样式。他们会过度编写img响应类样式，这很可能会根据图像的尺寸造成问题。.BS4使用img流体替换img响应良好点-我将添加一个BS4示例并更新为第二个选项BS4使用img流体替换img响应良好点-我将添加一个BS4示例并将其作为第二个选项进行更新