我正在尝试将一个元素(按钮)定位在 div 的底部，请检查我的代码以准确理解我想要实现的目标:
<body>
...
<div class="row">
<div class='col-md-3>
...
</div>
<div class='col-md-4 narrow'>
<div class='row'>
<div class='col-md-4'>
...
</div>
<div class='col-md-4'>
...
</div>
<div class='col-md-4'>
...
</div>
</div>
<div class='row'>
<div class='col-md-12'>
<a href="#">
<button>I'M THE ELEMENT!</button>
</a>
</div>
</div>
</div>
<div class='col-md-5'>
...
</div>
</div>
...
</body>
我无法设置 position:absolute，因为这破坏了我元素的视觉风格。
看我准备的这张图:
注意: 蓝色列的高度可变...因此我想将按钮放置在这些列的底部。我怎样才能做到这一点？
最佳答案
您有几个选项，但不幸的是，在 Bootstrap 框架的限制下，这两个选项都不可行。
选项 1:Flex-box
Flex-box旨在解决与此完全相同的问题，并且是 future 在 CSS 中创建布局的方式。
我已经使用 flex-box 实现了你的图像模型:
这是我的例子中的代码:
<section class="main">
<div class="left"></div>
<div class="middle">
<div class="middle-top-container">
<div class="middle-top-column"></div>
<div class="middle-top-column"></div>
<div class="middle-top-column"></div>
</div>
<div class="middle-bottom-container">
<button>I'm the element!</button>
</div>
</div>
<div class="right"></div>
</section>
.main {
display: flex;
justify-content: space-between;
height: 600px;
}
.main .left {
flex-grow: 3;
border: 2px solid #f00;
}
.main .middle {
flex-grow: 4;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.main .middle .middle-top-container {
flex-grow: 1;
display: flex;
justify-content: space-between;
}
.main .middle .middle-top-container .middle-top-column {
border: 2px solid #00f;
flex-grow: 4;
}
.main .middle .middle-bottom-container {
border: 2px solid gold;
text-align: center;
}
.main .right {
flex-grow: 5;
border: 2px solid #0f0;
}
(请注意，您需要为 flex 相关属性添加适当的 vendor prefixes 以获得最佳浏览器支持，但我的实现按原样在 Chrome 中运行。)
这对您意味着什么:对于页面的这一部分，您需要删除 Bootstrap 布局类并使用类似于我的实现(当然您可以根据需要对页面的其他部分使用 Bootstrap 布局) .
More information about flex-box with visual examples.
选项 2:定位上下文
可以使用 position: absolute; ，但同样，您将不得不在页面的这一部分使用 Bootstrap 布局类。它需要设置 position: relative;在包含元素上，包裹最外层三列布局中心的元素(对应于我实现中的 <div class="middle">...</div>)以建立定位上下文，然后使用 position: absolute; right: 0; bottom: 0; left: 0;在包含您的按钮的元素上。
请注意，根据我的观点和经验， flex 盒方法不那么脆弱，更面向 future ，并且比这个选项更可取。
关于html - 将元素定位在 div 的底部(不是父元素)- Twitter Bootstrap v3，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29134922/