bootstrap - 在列内添加 div 以水平对齐答案

【问题标题】：bootstrap - adding divs inside columns to align horizontallybootstrap - 在列内添加 div 以水平对齐
【发布时间】：2016-03-01 20:30:33
【问题描述】：

我是 Bootstrap 的新手，搜索无济于事（包括堆栈溢出），但似乎无法弄清楚这一点。我有一个使用 Bootstrap 的简单 12 列网格。我有一列“”。我需要添加动态数量的图像以水平对齐并在它们不适合时换行。我可以用简单的图像（img src="">）来做到这一点，但是每个图像都需要被包裹在一个 div 中（它们是产品图像，所以每个图像都有很多格式化信息）。当我这样做时，它们彼此垂直对齐。我在 div 中尝试了“float: left”，但没有格式化但结果相同。

我错过了什么？代码现在很简单，但我将添加它：这可以满足我的需求（水平列出图像），但不包含在 div 中。

<div class="col-sm-12">
    <img class="categoryImages" src="images/image1.png">
    <img class="categoryImages" src="images/image1.png">
    <img class="categoryImages" src="images/image1.png">
</div>

或者这不起作用 - 它垂直列出图像。

<div class="col-sm-12">
    <div><img class="categoryImages" src="images/image1.png"></div>
    <div><img class="categoryImages" src="images/image1.png"></div>
    <div><img class="categoryImages" src="images/image1.png"></div>
</div>

【问题讨论】：

听起来您应该更有效地使用引导列。例如。将每个图像放在自己的列中。 <div class="col-sm-3"><img></div> <div class="col-sm-3"><img></div> <div class="col-sm-3"><img></div> <div class="col-sm-3"><img></div> 有 4 列图像。
我不想这样做的原因是图像是动态创建的，所以我不知道会有多少图像。我也可以动态创建列代码（通过在编写代码之前计算图像），但我希望图像与响应页面代码分开运行，如果这有意义的话（我希望它们根据列中的空间进行换行） .
你能做一个代码笔来展示你想要做什么吗？我想我明白你的意思了。
好的，我希望链接有效 - 刚刚创建了一个 codepen 帐户！前 3 个图像在列中水平跨越，但最后 3 个（包装在 div 中）垂直跨越 - 我需要让它们水平跨越。 codepen.io/shadowfax007/pen/EKaJNM
知道了。好吧，您正在将图像设置在 div 中。默认情况下，一个 div 是display: block;。在你的 CSS 中，使用这个：div {display: inline}。老实说，如果你给 div 一个类名，这样你就可以指定这个项目，而让 div 单独在其他地方使用会更好。

标签： css twitter-bootstrap

【解决方案1】：

在你的 CSS 中设置：

div {display: inline}

或者使用特定的类名设置您的 div，并将其设置为内联。

【讨论】：