html - Bootstrap 垂直对齐按钮但不是响应内容

标签 html css twitter-bootstrap

我有 3 列使用 boostrap,每列都有一些高度不均匀的文本内容,问题是我希望按钮在每列的底部相互水平对齐。

很容易创建另一个 boostrap .row 来使它们对齐,但这不是响应式的,一旦屏幕宽度缩小,3 列将移动到垂直列表中,所有按钮将位于 3 列之后。

我这里有一些示例代码:

http://www.bootply.com/rA0yeogpQc#

因此,由于响应式,按钮必须位于内容容器内。

我尝试了一些不同的方法,但似乎我的解决方案不适用于 boostrap 或存在响应问题,希望找到适用于所有人的解决方案!

谢谢!

最佳答案

这里在您的示例中使用了 col-md-4 类,这意味着如果您将屏幕缩小到超过中等屏幕尺寸,即 iPad 或平板电脑,它将开始响应。

要确保它不会开始响应行为,你应该使用 col-xs-4 而不是 col-md-4,它不会开始响应直到超小屏幕尺寸即。手机屏幕

我也修改了你的代码

http://www.bootply.com/Cww3x84W62

希望这对你有用。

关于html - Bootstrap 垂直对齐按钮但不是响应内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25589756/

相关文章:

jquery - 如何在 jquery 的 bootstrap popover 内容中放置一个字形图标

ruby-on-rails - 是否有 "Rails Way"可以将 Twitter Bootstrap 主题折叠到 Rails 3 应用程序中?

jquery - rel ="canonical"缺少结束斜杠

html - 我的 div 高度不随背景图像缩放

html - 如何更改 IOS 的文本链接颜色

html - @media 查询未在范围内应用

css - Bootstrap 4 按钮向右切换菜单项...?

javascript - Array.includes 无法按预期使用 html 文件上传和 localforage

javascript - 创建依赖下拉列表

javascript - 使用 javascript 时超链接变得不可点击