程序员经验分享-hwhale

如何保持引导列大小相同，以便它们正确对齐？

2023-12-08

我正在构建一个带有引导列的简单网站，但我希望它们保持相同的高度，因为从现在开始，如果行中的最后一列高度较短，则下一列会放置在其下方位于左侧下一行。我怎么能这样做呢？

.col-xs-3 {
  border: 1px solid red;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row ">
    <div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nisi, quia. Nobis, quam, provident. Quam quidem reiciendis, aliquid fugiat assumenda deserunt officiis, animi ad magnam explicabo officia dolorem perspiciatis et?</div>
    <div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quibusdam, odit consequuntur, eligendi, laborum dolores modi, dignissimos praesentium cumque aut obcaecati at. Quaerat ducimus, nam, sint perspiciatis tenetur distinctio nobis.</div>
    <div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos labore, delectus dignissimos, laudantium, similique tempore cumque voluptatum placeat eos minima modi, veritatis! Cumque, asperiores eveniet animi architecto adipisci voluptatum sed?</div>
    <div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio!</div>
    <div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem, nostrum porro dicta explicabo assumenda, beatae. Autem voluptatem laudantium facilis, iste at, nesciunt!</div>
  </div>
</div>

edit：由于代码片段未正确显示以显示我的问题，因此这是一个代码笔：http://codepen.io/sgarcia-dev/pen/zqbjBg

edit2：我看到了其他线程，但这些线程显示了如何将它们设置为相同的高度，而不需要列响应。由于 IE 原因，我无法使用 Flexbox，并且我需要保持 HTML 足够干净，以便这些列具有不止一列大小（col-md-3、col-xs-6 等）。我当前的解决方案由于某种原因不起作用，是这样做的：

.col-sm-3:nth-child(3n):after {
  content: "";
  display: table;
  clear: both;
}

有人可以帮忙吗？


Placing <div class="clearfix"></div>应该解决这个问题

<div class="container">
  <div class="row ">
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nisi, quia. Nobis, quam, provident. Quam quidem reiciendis, aliquid fugiat assumenda deserunt officiis, animi ad magnam explicabo officia dolorem perspiciatis et?</div>
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quibusdam, odit consequuntur, eligendi, laborum dolores modi, dignissimos praesentium cumque aut obcaecati at. Quaerat ducimus, nam, sint perspiciatis tenetur distinctio nobis.</div>
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos labore, delectus dignissimos, laudantium, similique tempore cumque voluptatum placeat eos minima modi, veritatis! Cumque, asperiores eveniet animi architecto adipisci voluptatum sed?</div>
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem</div>
    <div class="clearfix"></div>
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem, nostrum porro dicta explicabo assumenda, beatae. Autem voluptatem laudantium facilis, iste at, nesciunt!</div>
  </div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

twitterbootstrap

multiplecolumns

如何保持引导列大小相同，以便它们正确对齐？ 的相关文章

  • 为什么在 HTML 中使用 onClick() 是一种不好的做法？

    我多次听说使用 JavaScript 事件 例如onClick 在 HTML 中是一种不好的做法 因为它不利于语义 我想知道以下代码有什么缺点以及如何修复 a href link a 你可能正在谈论不引人注目的 JavaScript htt

  • PyCharm 中有 HTML 块 {%%} 的快捷方式吗？

    我正在使用 HTML 块 例如 block content 经常使用 但必须输入括号和百分比符号很麻烦 有没有捷径或其他方法可以自动执行此操作 到目前为止我刚刚发现这个 PyCharm 中有插入 的快捷方式吗 https stackover

  • 使用 iframe 显示静态文本内容

    我有一个非常简单的要求 我有一个 div 我在其中显示一些文本内容的标签 我想在一个中显示相同的文本内容 我想要实现的目标已写在下面 有人可以帮忙吗 b div This is a content which I want to displ

  • 在html表格的每一行添加点击功能

    我最近创建了一个函数 它根据用户在网站中的输入进行一些复杂的名称匹配 并将结果作为表格格式的 html 文件返回 我的问题是如何在每一行添加点击功能 df get cust info returns a pandas dataframe d

  • 如何重定向到 instagram://user?username={username}

    我的 html 页面上有这个链接 可以在特定用户上打开 Instagram 应用程序 a href Link to Instagram Profile a 我一直在寻找自动运行 url instagram user username USE

  • 禁用引导列上的滚动

    我正在尝试禁用引导列上的滚动 这是我的代码 div class container fluid h 100 div class row h 100 div class col 4 h 100 bg dark fixed div div cl

  • 如何设置菜单按钮和菜单项的样式

    我尝试更改菜单按钮中的样式 我可以更改菜单按钮样式 但不能更改其菜单项 无论我尝试什么 菜单按钮内的菜单项都保持不变 menu button fx background color black menu button label fx ba

  • 如何将背景图像仅应用于一个反应页面而不是整个应用程序？

    注册页面示例 register background image linear gradient to right ff5722 0 ff9800 100 margin top 150px important div div div div

  • 在requestAnimationFrame中使用clearRect不显示动画

    我正在尝试在 HTML5 画布上做一个简单的 javascript 动画 现在我的画布是分层的 这样当我收到鼠标事件时 背景层不会改变 但带有头像的顶层会移动 如果我使用 requestAnimationFrame 并且不清除屏幕 我会看到

  • 保持未知数量的 div 居中，每行最多 4 个

    我有一个简单的问题 但我自己无法解决 简而言之 有一个未知电话我必须在页面中放置的元素数量 最多 每行 4 个元素 但仍居中 此图片给您一个提示 我为了示例而设置它 详细 在上图中我涵盖了不同的场景 例如 如果总共有 5 个元素 则应使用第

  • 将div设置为隐藏，延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document

  • Iframe 相对路径挑战

    我有一个页面 在页面内有一个 Iframe 目录如下 Folder1 Folder2 IframeCSS IframeCSS Css iframePage1 html stuff css parentPage1 html 在 iframeP

  • 避免响应式页面的重复内容

    我目前正在做一个涉及响应式设计的项目 整个布局应该使用HTML和CSS来实现 我知道可以使用 java 脚本将内容从一个列布局移动到另一列布局 而无需复制内容 但是使用 HTML 和 CSS 是否可以实现相同的效果 以下面的例子为例 它会在

  • 更改文本输入标签中文本的大小？

    我有一个很大的文本输入框 但我无法更改字体大小

  • 如何在jquery中以相反的顺序迭代元素？ [复制]

    这个问题在这里已经有答案了 我是jquery的新手 我想知道如何使用each 在jquery中以相反的顺序迭代表单元素 任何帮助 将不胜感激 尝试这个 input get reverse each function

  • 如何仅在最后一个
  • 处给出透明六边形角度？

    • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png

  • 如何获取浏览器视口中当前显示的内容

    如何获取当前正在显示长文档的哪一部分的指示 例如 如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近 那么我想得到 500 n501 n502 或类似的内容 显然 大多数场景都会比

  • Schema.org 的常见问题解答页面

    我有一个常见问题解答页面 我想用更好的 html 架构来实现它

  • CSS 是否有不等于选择器？

    CSS中有类似 不等于 的东西吗 例如 我有以下代码 input 但对于某些输入 我需要将其作废 我想通过将类 reset 添加到输入标签来做到这一点 例如

  • FireFox 中的“contenteditable = true”高度问题

    当有空的时候div with contenteditable true CSS contenteditable true border 1px dashed dedede padding 3px HTML div div 在 IE 和 Ch

随机推荐

热门标签