Question

是否可以在bootstrap 3选项卡中始终位于右下角？

以下是我在标签

中的代码示例

<div class="wizard tab-content">
    <!--Step 1 --> 
    <div id="step-1" class="tab-pane fade in active">
        <div class="row">
            <div class="col-md-12">
                <h2>First step</h2>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-6">
                <a href="#step-1" data-toggle="tab">BACK</a> 
            </div>
            <div class="col-md-6 col-sm-6 col-xs-6 text-right">
                <a href="#step-2" data-toggle="tab">NEXT</a> 
            </div>
        </div>        
    </div>
    <!--/Step 1 --> 
</div>

CSS

.wizard{
     min-height:400px;
     background-color:red;
}

我需要的是BACk和NEXT始终位于向导元素的底部？

请看看这个工作小提琴 http://jsfiddle.net/52VtD/9126/

Answer 1

首先将position:relative添加到.wizard div，然后您可以将position:absolute用于 BACK 和 NEXT 。像

这样的东西

.wizard {
min-height:400px;
background-color:red;
position: relative;
}

.col-md-6 {
position: absolute;
bottom: 0;
}

Answer 2

请参阅：try：http://jsfiddle.net/52VtD/9127

事实上，这个解决方案与@Izzy没有太大差别：

CSS：

.wizard {
 min-height:200px;
 background-color:red;
 position: relative;
}
.wizard .tab-pane > div:last-child {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin:0;
}

Bootstrap 3按钮总是在标签的右下方？

2 个答案: