DEV Community
·
通过使用 元素和 Bootstrap 来组织布局 🤹
💡
原文英文，约300词，阅读约需1分钟。
📝
内容提要
在DPI的Capstone项目中，我学习了连接Bootstrap CSS框架、使隐藏元素可见、使用row和col类水平排列元素、在小屏幕上使用响应式列类垂直排列元素，以及固定页脚以确保底部元素与页脚对齐。这些技巧有助于在不同屏幕上正确定位元素。
🎯
关键要点
- 将Bootstrap CSS框架连接到应用程序中。
- 使隐藏元素可见，建议为<div>类添加边框属性。
- 使用row类和col类水平排列元素。
- 在小屏幕上使用响应式列类使元素垂直排列。
- 将<footer>固定在页面底部，使用bd-footer类。
- 确保底部元素与页脚对齐，使用特定的结构。
❓
延伸问答
如何将Bootstrap CSS框架连接到我的应用程序中？
在application.html.erb中添加以下代码：<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css">
如何使隐藏的元素可见？
可以为<div>类添加边框属性，例如：<div class="border">，这样可以帮助理解布局。
如何使用Bootstrap的row和col类水平排列元素？
使用row类作为主<div>，并为嵌套的<div>使用col类，例如：<div class="row"><div class="col"></div></div>。
在小屏幕上如何使元素垂直排列？
在嵌套的<div>中添加响应式列类col-12和col-md，例如：<div class="col-12 col-md"></div>。
如何将页脚固定在页面底部？
在<footer>类中添加bd-footer，例如：<footer class="bd-footer"></footer>。
如何确保底部元素与页脚对齐？
使用以下结构：<body class="d-flex flex-column min-vh-100"><main class="flex-grow-1 d-flex flex-column justify-content-between"></main><footer class="bd-footer"></footer></body>。
➡️
