当前位置: 首页 > 面试题库 >

bootstrap 3到bootstrap 4 cols不再水平对齐

韩琛
2023-03-14
问题内容

我正在迁移到引导程序4,但是我已经将我的页面的boostrap-min.css从3换成了4,据我所知列的正确性,我的列现在都垂直对齐了。

我还使用了JS小提琴来进行测试,并且能够将它们全部复制为垂直的我指明正确的方向,这应该可行

<div class="row">
    <div class="col-12">
        <div class="col-md-2">
            <h1>TEST</h1>
        </div>
        <div class="col-md-2">
            <h1>TEST</h1>
        </div>
        <div class="col-md-2">
            <h1>TEST</h1>
        </div>
        <div class="col-md-2">
            <h1>TEST</h1>
        </div>
    </div>
</div>

问题答案:

删除col-12Bootstrap 4 ,因为它需要新row的嵌套列。



 类似资料:
  • text-align-last属性用于定义块级容器中,行内元素的最后一行内容的水平对齐方式,可选值有 auto | left | center | right | justify | start | end | start | end,默认值为 auto。 除 auto外,其它取值与 text-align 属性取值的含义相同。auto 表示使用 text-align 的设定(例外情况,text-a

  • 在一个块级容器中,当一行中的行内级框的总宽度,小于容器的宽度时,通过 text-align属性来指定这些行内级框在行中的水平分布。 事实上,text-align属性是通过指定行框与哪个点对齐,来决定行内级框在行中如何进行水平分布。可选值有 left | center | right | justify | start | end,默认值为start。不同取值的含义见表 3‑3: 表 3-3 tex

  • 问题内容: 由于某些原因,我的div不会在包含div的水平居中: 有时有一个行div,其中只有一个块div。我究竟做错了什么? 问题答案: 要实现您想要做的事情: 考虑使用代替。

  • 问题内容: 我有一个容器div,其中有一个固定的,并带有。 我想要水平行的float:此容器内的div左。左浮动的Divs在读取其父级的右边界后自然会推到下面的“行”上。即使父级的不允许这样做,也会发生这种情况。这是这样的样子: ![错误] [1]- 删除了已被广告替换的图片棚屋图片 我希望它看起来如何: ![右] [2]- 删除了已被广告替换的图片棚屋图片 注意:我想要的效果可以通过使用内联元素

  • 问题内容: 我需要将两个div彼此对齐,以便每个都包含一个标题和一个项目列表,类似于: 使用表非常容易,但是我不想使用表。我该如何实现? 问题答案: 将div浮动到父容器中,并设置其样式如下:

  • 我正在尝试将单元格表格中的一列向右对齐。因此,我使用column对象的“setHorizontalAlignment”。结果单元格实际上是用“align=right”呈现的,但它没有向右对齐,因为单元格包含另一个填充完整单元格的div。 这是GWT中的bug还是我做错了? 我知道我也可以通过CSS对齐它,但我希望,我可以得到这种方法的工作,因为它似乎是更干净的解决方案。