Question

请你看一下This Demo，让我知道为什么我无法将#box-wrap及其子元素（#box-1, #box-2, #box-3）正确放入Bootstrap 3 {{} 1}}

＆＃13;

.well

＆＃13;

#box-wrap {
  position: relative;
  width:100%;
  background-color:#fff;
}

#box-1 {
  position: absolute;
  width:100%;
  height:120px;
  top: 0;
  left: 0;
  background:khaki;
}

#box-2 {
  position: absolute;
  top: 5px;
  left: 5px;
}
#box-3 {
  position: absolute;
  top: 44px;
  left: 5px;
}

＆＃13;

谢谢，

Answer 1

如果我正确理解了您的布局，这是我的解决方案。

我已移除position: absolute;并将box-2，box-3从div更改为span s（因为div默认为display:block

<强> HTML

<div class="row">
  <div class="container">
    <div class="well"> 
      <div id="box-wrap">
        <div id="box-1"></div>
        <span id="box-3"><button class="btn btn-success">&lt;</button></span>      
        <span id="box-2"><button class="btn btn-success">&gt;</button></span> 
      </div>
    </div>
  </div>
</div>

<强> CSS

#box-wrap {
    position: relative;
    width:100%;

}

#box-1 {
    width:100%;
    height:120px;
    top: 0;
    left: 0;
    background:khaki;
}
#box-2, 
#box-3 {
  background:khaki;
}

<强> DEMO

更新（Thx @ckuijjer）

感谢@ckuijjer的评论。这是完成同样事情的他的更简单的版本：

简化HTML

<div class="container">
  <div class="row">  
    <div class="well"> 
      <div id="box-1"></div>
      <button class="btn btn-success">&lt;</button>
      <button class="btn btn-success">&gt;</button>
    </div>
  </div>
</div>

简化CSS

#box-1 {
    height:120px;
    background:khaki;
}

<强> Simplified DEMO

Answer 2

只需将您的CSS改为

即可

#box-2 {
    position: absolute;
    top: 45px;
    float:right;
    right: 5px;
}

<强> Working Demo

Answer 3

使用 #box-1{ position:relative; }

将解决问题。我认为，由于box-1的父元素都没有固定高度，因此以某种方式影响使用position：absolute作为子div。

关于在Bootstrap 3 .well中定位相对和绝对框的问题

3 个答案: