代码之家 › 专栏 › 技术社区 › Lechucico

引导按钮组对齐不工作

twitter-bootstrap css html

Lechucico · 技术社区 · 8 年前

我有以下代码:

<div class="btn-group btn-group-justified">
    <a class="btn btn-success" href="{% url 'interface:data' user_id 24 %}"> 24h </a>
    <a class="btn btn-success" href="{% url 'interface:data' user_id 12 %}"> 12h </a>
    <a class="btn btn-success" href="{% url 'interface:data' user_id 4 %}"> 4h </a>
</div>

我得到以下结果:

为什么我没有得到这个结果?

2 回复 | 直到 8 年前

Robert 8 年前

正如其他人所指出的, .btn-group-justified 在引导数据库4中折旧。在迁移文档中,我们提供了一个替代方案:

已删除 .btn组对齐 .作为替换,您可以使用 <div class="**btn-group d-flex**" role="group"></div> 作为包装具有的元素 .w-100 。

https://getbootstrap.com/docs/4.0/migration/#button-group

利用此新设置,您的代码如下所示:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="btn-group d-flex" role="group">
  <a class="btn btn-success w-100" > 24h </a>
  <a class="btn btn-success w-100" > 12h </a>
  <a class="btn btn-success w-100" > 4h </a>
</div>

Plastic 8 年前

看起来像 .btn-group-justified 类已从引导数据库4中删除( source )

您只需使用一点CSS即可完成相同的任务:

HTML:

<div class="btn-group btn-group-justified">
    <a class="btn btn-success" > 24h </a>
    <a class="btn btn-success" > 12h </a>
    <a class="btn btn-success" > 4h </a>
</div>

CSS:

a {
   width:100%;
}
div {
   width:100%;
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前