twitter-bootstrap - Bootstrap 4 - 将元素与其容器底部对齐
问题描述
我试图找到答案,但没有运气,我自己也尝试了一些事情。我在一行中有两列,我想将第二列(三个按钮组)的底部 div 垂直对齐到行容器的底部,即#control-panel。
目前第二列是居中对齐(垂直),这就是为什么三个按钮没有连接到容器底部的原因。
<div id="control-panel">
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="display-4 p-3"><h2>Step 3:</h2></div>
<p>Add a contact form, if you like, so people can contact you!</p>
<a href="" class="btn btn-primary">Show contact form</a>
</div>
<div class="col-lg-3 d-flex flex-column">
<div class=" p-3"><h2>Step 4:</h2></div>
<p>Pick a style for your website</p>
<div class="btn-group align-self-bottom">
<button class="btn btn-primary" type="button">Style 1</button>
<button class="btn btn-secondary" type="button">Style 2</button>
<button class="btn btn-primary" type="button">Style 3</button>
</div>
</div>
</div>
</div>
</div>
容器的 CSS 只是:
#control-panel {
height: 200px
}
我尝试将 'align-self-bottom' 或 'align-self-end' 用于我想要对齐到底部的 'btn-group' 类,但它水平移动它而不是垂直移动我想要的。
非常感谢任何建议
解决方案
检查这个 StackBlitz:FlexBox 示例
HTML 文件:
<div class="main-container">
<div class="first-column">
</div>
<div class="second-column">
<div class="buttons">
<button>Button1</button>
<button>Button2</button>
</div>
</div>
</div>
CSS 文件:
.main-container {
border-color: red;;
border-style: solid;
height: 100px;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.first-column {
border-color: blue;;
border-style: solid;
height: 100px;
width: 100px;
}
.second-column {
border-color: green;;
border-style: solid;
height: 100px;
width: 100px;
}
.buttons {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100px;
}
我在这里使用 flexbox 创建一个主容器(红色)和内部的两列(蓝色和绿色),然后在第二列中创建两个按钮并将它们对齐到容器的底部。
推荐阅读
- xamarin.android - 启用 Multi-Dex 使 Azure Devops Xamarin Android 构建失败
- apache-spark - java.lang.NoSuchMethodError: org.apache.solr.client.solrj.impl.CloudSolrClient$Builder.withHttpClient
- java - $and 条件不适用于 springboot mongodb 中的三个或三个以上字段
- javascript - CRM - 在表单上触发 onChange
- typescript - 对象的类型缩小不能按预期工作
- amazon-web-services - 将 AWS 移动后端连接到 DynamoDB
- angular - 在 Angular 中导入 web 组件(导出为 es6 模块)
- amazon-web-services - Redshift 命令 - 复制添加带有随机数的列
- postgresql - 如何在 PostgreSQL 中替换表列值中的特定字符串
- excel - 如果范围包含某些值,则隐藏特定行