html - 在 BS4 ekko-lightbox 中对齐页脚文本

标签 html css twitter-bootstrap

我正在尝试对齐 ekko-lightbox 中的文本(BS4) data-footer向左转。默认右对齐。灯箱建立在 BS4 的模态上,因此灯箱的 data-footer属性似乎变成了 Modal 的 modal-footer .但是,无论我尝试应用什么 CSS 类,我似乎都无法将页脚文本向左移动。我尝试了一系列方法,包括将自定义类写入 <span>页脚文本周围,还有一个应该影响任何 modal-footer 的自定义类在ekko-lightbox里面容器。没有骰子。你知道解决这个问题的方法吗?非常感谢!

最佳答案

modal-footer 使用 flex box 并且有一个 justify-content 设置为 flex-end。将其更改为 flex-start,您的文本将左对齐。它基本上是在容器右侧开始 flex,因此文本看起来是右对齐的(实际上是左对齐的)。

附件是我在检查器中所做的更改的屏幕快照,它在左侧启动 flex,在视觉上为您的案例完成左对齐文本。

代码调整:

.modal-footer {
   justify-content: flex-start;
}

更改为 flex-start

enter image description here

它如何呈现不变。

请注意,在这两个示例中,text-align 都被保留了。

enter image description here

关于html - 在 BS4 ekko-lightbox 中对齐页脚文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47058828/

相关文章:

html - 浏览域时样式不起作用

javascript - HTML SELECT 列表在列中显示每个选项的描述

html - div 之间的 CSS 1px 空间

javascript - 重置切换按钮

javascript - 如何使 Bootstrap 4 列跟随页面滚动?

css - 如何将手机键盘放在固定页脚 JqueryMobile 下方

jquery - 同步 Carousel 和 Slider 以在 Flexslider 中使用相同的 directionNav

css - 如何创建一个分成两半并朝不同方向移动的 css 背景?

java - HtmlUnit css 未正确应用

html - 位置固定后停止重叠