Question

我可以使用Bootstrap创建一个响应式垂直水平绝对框吗？

如果解决方案没有，那将是件好事，

bottom: 0; right: 0; // they cause some bugs in jquery ui's draggable

的CSS，

.centerBox {
  margin: auto;
  position: absolute;
  border:2px solid red;
  top: 0; left: 0;
}

html＆amp;自举，

<div class="col col-xs-2 centerBox">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
</div>

Answer 1

正如我所见，您希望您的盒子在视口中居中。你可以用一些jquery来做到这一点。

function centerBox(){
  var winH = $(window).height();
  var winW = $(window).width();
  var boxH = $('.cenetrBox').height();
  var boxW = $('.cenetrBox').width();
  $('.cenetrBox').css({
    left: Math.ceil((winW-boxW)/2) + 'px',
    top: Math.ceil((winH-boxH)/2) + 'px'
  });
}

这个功能响应包括和：

$(window).on('resize',function(){
  centerBox();
});

希望这会对你有所帮助。

如果你想要一个边框，别忘了包含在css中：

.centerBox {
  margin: auto;
  position: absolute;
  border:2px solid red;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

}

一个具有Bootstrap的响应式垂直水平绝对盒子？

1 个答案: