代码之家 › 专栏 › 技术社区 › joao-m-santos

在引导4中禁用列包装

bootstrap-4 twitter-bootstrap html5 css html

joao-m-santos · 技术社区 · 5 年前

我目前面临以下情况:

<div class="row no-gutters">
    <div class="col"></div>
    <div class="col col-auto"></div>
</div>

即 [|-----第1栏-----|第2栏|]

column1 宽度大于包含行的宽度。发生的是,而不是缩小以使两列仍在同一行中, 第1栏 col-12 和 column2 下拉到新行,从而包装列。

有没有办法防止这种行为,并始终保持两列在同一行?

0 回复 | 直到 5 年前

Carol Skelly 4 年前

通常是 flex-nowrap 类可以在行上使用,以防止在引导4中换行。在这种情况下,由于列中的内容很宽,省略了内容,这将不起作用。

由于flexbox宽度的计算方式(解释 here 和 here ),你应该设置一个 width , min-width max-width ( 任何宽度 )关于 flex-grow:1 列( col ).

width:0 上 col列 ...

<div class="row no-gutters">
    <div class="col">
        <h4 class="ellipsis">aaaaaa..</h4>
    </div>
    <div class="col-auto d-flex align-items-center">
        something
    </div>
</div>

.col {
  width: 0;
}

https://codeply.com/go/JKLUD0NLn4

col列 和 col-auto 在同一列。这个 弹性增长:1 属于 col列 col自动 从萎缩。

推荐文章

xajetin · 导航不更改滚动上的颜色

2 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

2 年前

Bryan Santos · 固定表头与引导

2 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

2 年前

tym · 根据用户偏好显示字段

2 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

2 年前

Pavel · 当验证DIV可见时,引导网格会移动

6 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

6 年前

Alexander David · 折叠卡打开,然后立即再次关闭

6 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

6 年前