将控件div设置到页面底部

Question

我正在尝试设置一个包含按钮的底部控件div。该控件div会像底部导航栏或页脚一样固定在页面底部。我使用的是Bootstrap，因此我的控件容器div使用的是Bootstrap的“ row”类。为了使其固定在页面底部，我将底部设置为0，并将位置设置为固定。但是，当我这样做时，结合宽度为100％，控制容器div的右侧一直延伸到页面的最右侧。如何使该底部div与其上方的大白框对齐，并在左右两侧留有空白？

这是底部控件div的代码：

<div class="row" style="background-color: darkgray; bottom: 0; position: fixed; width: 100%;">
    <div class="col-md-4">
        <input type="button" class="btn" value="Add" />
    </div>
    <div class="col-md-4">
        <input type="button" class="btn" value="Delete" />
    </div>
    <div class="col-md-4">
        <input type="button" class="btn" value="Save" />
    </div>
</div>

基本上，我要完成的操作如下图所示，但控件div仍停留在页面底部。

Answer 1

好的，那么你就这样

1. 删除课程“行”
2. 按照以下步骤更改代码

。

<div style="left: 0; bottom: 0; position: fixed; width: 100%;">
      <div style="background-color: darkgray; width: 50%; margin: 0 auto; display: block;">
        <div class="col-md-4">
            <input type="button" class="btn" value="Add" />
        </div>
        <div class="col-md-4">
            <input type="button" class="btn" value="Delete" />
        </div>
        <div class="col-md-4">
            <input type="button" class="btn" value="Save" />
        </div>
      </div>
    </div>