Question

我试图将一个元素（按钮）放在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，因为这会打破我项目的视觉风格。

看看我准备的这张照片：

Layout http://oi57.tinypic.com/30ll5pg.jpg

注意：蓝色列的高度可变...因此我想将按钮放在这些列的底部。我怎样才能做到这一点？

Answer 1

你有几个选择，但遗憾的是在Bootstrap框架的限制范围内都不可能。

选项1：弹性框

Flex-box旨在解决与此类似的问题，并且是在CSS中创建布局的未来之路。

我使用flex-box实现了你的图像模型：

Live example.

以下是我的示例中的代码：

<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>）来建立定位上下文，然后使用{{ 1}}在包含按钮的元素上。

请注意，灵活方式方法不那么脆弱，面向未来，并且在我的观点和经验中优于此选项。

Answer 2

你可以使用float

#div_button {float: bottom;}

这应该使按钮位于底部。只需确保按钮与蓝色按钮位于同一个div中。

将元素定位在div的底部（不是父级） - Twitter Bootstrap v3

2 个答案: