Html 将一个元素定位在div的底部（不是父级）-Twitter引导v3_Html_Css_Twitter Bootstrap

Html 将一个元素定位在div的底部（不是父级）-Twitter引导v3

html css twitter-bootstrap

Html 将一个元素定位在div的底部（不是父级）-Twitter引导v3,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正在尝试将一个元素（按钮）放置在div的底部，请检查我的代码以准确理解我想要实现的目标： <body> ... <div class="row"> <div class='col-md-3> ... </div> <div class='col-md-4 narrow'> <div class='row'>

我正在尝试将一个元素（按钮）放置在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>


...
您可以使用float
#div_按钮{float:bottom；}

这应该使按钮位于底部。只需确保按钮与蓝色按钮位于同一个div中。
您有两个选项，但不幸的是，在引导框架的约束下，这两个选项都不可能
选项1：弹性箱
被设计来解决类似的问题，并且是未来在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；
证明内容：之间的空间；
高度：600px；
}
.main.左{
柔性生长：3；
边框：2px实心#f00；
}
.main.中{
弹性生长：4；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}
.main.中间.中间顶部容器{
柔性生长：1；
显示器：flex；
证明内容：之间的空间；
}
.main.中间.中间顶部容器.中间顶部立柱{
边框：2倍实心#00f；
弹性生长：4；
}
.main.中间.中间底部容器{
边框：2件纯金；
文本对齐：居中；
}
梅因，对{
弹性生长：5；
边框：2px实心#0f0；
}

（请注意，您需要为flex
相关属性添加适当的属性，以获得最佳浏览器支持，但我的实现在Chrome中仍能正常工作。）
这对您意味着什么：对于页面的这一部分，您需要删除引导布局类，并使用类似于我的实现（当然，您可以根据需要为页面的其他部分使用引导布局）

选项2：定位上下文
可以使用位置：绝对，但同样，您必须避免在页面的这一部分使用引导布局类。它需要设置位置：relative在包含元素上，该元素包裹最外层三列布局的中心（对应于我的实现中的…
），以建立定位上下文，然后使用位置：绝对；右：0；底部：0；左：0
请注意，弹性箱方法不那么脆弱，更面向未来，在我看来和经验中，它比这个选项更可取。
这不起作用，问题是div具有动态高度。是响应性设计。不幸的是，bottom
不是一个。float
可以是右/左（或无），可以选择从父级继承，但决不能是bottom
。您希望.show
div
始终与它的同级高度相同，并且底部的按钮
，对吗？你给引导添加了额外的css吗？如果没有，则此代码已完全符合您的要求。@MaksymStepanenko.shown
div
有动态高度，我希望按钮位于该div底部，蓝色列后面。