Html 引导将一个大映像与四个小映像对齐_Html_Css_Twitter Bootstrap_Twitter Bootstrap 3

Html 引导将一个大映像与四个小映像对齐

html css twitter-bootstrap twitter-bootstrap-3

Html 引导将一个大映像与四个小映像对齐,html,css,twitter-bootstrap,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,我正在尝试用引导程序制作一个网页。这就是我希望它看起来的样子：然而，我有困难使图片对齐。这就是我到目前为止所做的：我试着在我的专栏中不添加填充和空白，但这似乎没有起作用。以下是我到目前为止的HTML： <body> <div class="container"> <div class="row"> <div class="col-lg-8"><img src="img/logo.png" class="img-respon

我正在尝试用引导程序制作一个网页。这就是我希望它看起来的样子：

然而，我有困难使图片对齐。这就是我到目前为止所做的：

我试着在我的专栏中不添加填充和空白，但这似乎没有起作用。以下是我到目前为止的HTML：

<body>
<div class="container">
  <div class="row">
    <div class="col-lg-8"><img src="img/logo.png" class="img-responsive"></div>
  </div>
  <div style="margin-top:30px"></div>

  <div class="row">
  <div class="col-lg-3 nopadding"> <img class="img-responsive" src="img/tagline.png"></div>
  <div class="col-lg-3 nopadding"> <img class="img-responsive" src="img/karen_big.png"></div>
  <div class="col-lg-6 nopadding"><img class="img-responsive"src="img/don_big.png"></div>
  <div class="col-lg-3 nopadding"><img class="img-responsive" src="img/elwood_big.png" style=""></div>
  <div class="col-lg-3 nopadding"><img class="img-responsive" src="img/michigan.png"></div>
  </div>


</body>
</html>

提前谢谢

您可能需要缩放图像以适应容器。e、 g

<img class="img-responsive" src="img/karen_big.png" width="100%" height="100%">

您可能需要缩放图像以适应容器。e、 g

<img class="img-responsive" src="img/karen_big.png" width="100%" height="100%">

为了获得正确的对齐方式，您的标记应该更像这样：

+---------+----------+
|+-------+|          |
||   |   ||          |
|+---+---||          |
||   |   ||          |
|+---+---+|          |
+----+----+-----+----+
|    |    |     |    |
+----+----+-----+----+

或转换为引导网格系统：

<div class='row'>
    <div class='col-md-6'>
        <div class='row'>
            <div class='col-md-6'></div>
            <div class='col-md-6'></div>
        </div>
        <div class='row'>
            <div class='col-md-6'></div>
            <div class='col-md-6'></div>
        </div>
    </div>
    <div class='col-md-6'></div>
</div>
<div class='row'>
    <div class='col-md-3'></div>
    <div class='col-md-3'></div>
    <div class='col-md-3'></div>
    <div class='col-md-3'></div>
</div>

例如：

为了获得正确的对齐方式，您的标记应该更像这样：

+---------+----------+
|+-------+|          |
||   |   ||          |
|+---+---||          |
||   |   ||          |
|+---+---+|          |
+----+----+-----+----+
|    |    |     |    |
+----+----+-----+----+

或转换为引导网格系统：

<div class='row'>
    <div class='col-md-6'>
        <div class='row'>
            <div class='col-md-6'></div>
            <div class='col-md-6'></div>
        </div>
        <div class='row'>
            <div class='col-md-6'></div>
            <div class='col-md-6'></div>
        </div>
    </div>
    <div class='col-md-6'></div>
</div>
<div class='row'>
    <div class='col-md-3'></div>
    <div class='col-md-3'></div>
    <div class='col-md-3'></div>
    <div class='col-md-3'></div>
</div>

举个例子：

对于这个特定的例子，最简单的解决方案就是在包含大图像的列上使用bootstrap的

pull right

类

<div class="container">
  <div class="row">
    <div class="col-lg-3 nopadding"><img class="img-responsive" src="http://placekitten.com/g/150/150"></div>
    <div class="col-lg-3 nopadding"><img class="img-responsive" src="http://placekitten.com/g/150/150"></div>
    <div class="col-lg-6 nopadding pull-right"><img class="img-responsive" src="http://placekitten.com/g/300/300"></div>
    <div class="col-lg-3 nopadding"><img class="img-responsive" src="http://placekitten.com/g/150/150"></div>
    <div class="col-lg-3 nopadding"><img class="img-responsive" src="http://placekitten.com/g/150/150"></div>
  </div>
</div>

对于这种特殊情况，最简单的解决方案是在包含大图像的列上使用引导的

向右拉

类

<div class="container">
  <div class="row">
    <div class="col-lg-3 nopadding"><img class="img-responsive" src="http://placekitten.com/g/150/150"></div>
    <div class="col-lg-3 nopadding"><img class="img-responsive" src="http://placekitten.com/g/150/150"></div>
    <div class="col-lg-6 nopadding pull-right"><img class="img-responsive" src="http://placekitten.com/g/300/300"></div>
    <div class="col-lg-3 nopadding"><img class="img-responsive" src="http://placekitten.com/g/150/150"></div>
    <div class="col-lg-3 nopadding"><img class="img-responsive" src="http://placekitten.com/g/150/150"></div>
  </div>
</div>

您的意思是只更改图像的大小？我试过了，还是不起作用。你是说只是改变图像的大小？我试过了，它仍然不起作用。如果不考虑你的答案，添加

nopadding

，除了第一个

col md-*

将获得所需的结果。示例：只需

.no添加{padding:0；}

将非常感谢您！！将Peter和Tim的答案结合起来就成功了。在不为你的答案打分的情况下，将

no添加到除第一个col md-*
之外的所有col将获得所需的结果。示例：只需.no添加{padding:0；}
将非常感谢您！！结合Peter和Tim的答案就成功了。@MattD你说的是图像而不是容器的完整尺寸吗.img responsive{width:100%；}
使用Bootply的桌面和移动视图查看其中一个示例，并调整该窗口的宽度。特别是从我的例子来看，它只在某个宽度上看起来是正确的。当它变窄时，可能是当它低于中等网格类的阈值时，四个较小的图像堆叠在一起。@MattD好的，是的，我仍然使用他的col lg-*
类。他发布的内容可能是也可能不是重现问题的最低代码；我没有对他在不同的断点想要什么做任何假设。您只需将其更改为col xs-*
，它适用于所有尺寸。理想情况下，您的解决方案应适用于所有尺寸，除非询问者指定它应在不同宽度下以不同方式折叠。因此，我不觉得这个答案特别好，当然，与公认的答案相比。这就是我要说的。这是一个比好得多的回答。不。
@MattD你是说图像没有拍摄容器的全部尺寸吗.img responsive{width:100%；}
使用Bootply的桌面和移动视图查看其中一个示例，并调整该窗口的宽度。特别是从我的例子来看，它只在某个宽度上看起来是正确的。当它变窄时，可能是当它低于中等网格类的阈值时，四个较小的图像堆叠在一起。@MattD好的，是的，我仍然使用他的col lg-*
类。他发布的内容可能是也可能不是重现问题的最低代码；我没有对他在不同的断点想要什么做任何假设。您只需将其更改为col xs-*
，它适用于所有尺寸。理想情况下，您的解决方案应适用于所有尺寸，除非询问者指定它应在不同宽度下以不同方式折叠。因此，我不觉得这个答案特别好，当然，与公认的答案相比。这就是我要说的。这是一个比“不”更好的回答。
。