Question

相关Bootply：http://www.bootply.com/OdVIzrxTV5

我在Bootstrap中创建一个布局，其中各个部分在移动设备上堆叠在一起：

|---|
| A |
|---|
| B |
|---|
| C |
|---|

但在桌面上分开：

|---|    |---|
| B |    | A |
|---|    |---|
         | C |
         |---|

我在 A 和 C 部分使用.pull-right来完成这项工作，但因为Bootstrap使用了float，所以 B 如上所示，自动对齐到顶部。我真正想要的是将 B 部分垂直居中，如下所示：

         |---|
|---|    | A |
| B |    |---|
|---|    | C |
         |---|

B 部分应垂直居中于 A 和 C 。我尝试在行上应用flexbox，但这会破坏布局。我也尝试了各种其他的CSS黑客攻击，但似乎都没有以正确的方式正常工作，破坏了移动或桌面上的布局。

当高度未知时，垂直中心B部分是否有可靠的响应式解决方案？如果有帮助， B 部分将成为图像元素。

Answer 1

你尝试过其他什么CSS黑客攻击？只是好奇，因为我知道在使用Bootstrap的工厂版本时（没有sass / less）你真的必须对CSS选择器挑剔。

话虽这么说，也许JavaScript方法可能有所帮助！这是代码，我将引导您完成一些可以满足您需求的更改。

变量breakpoint

将此变量更改为为断点设置的任何像素。对于Bootstrap，xs选择器默认在768处启动。如果您想在其他断点处执行操作，可以添加多个断点并使用更多if / else语句。

首先if

这会在页面加载时触发，并会立即测试屏幕的宽度，并在需要时更改边距。

<强> window.resize()

每次调整窗口大小时，类似的if语句都会关闭并重新计算边距。如果您输入一些文本并更改高度，您将看到它保持居中。如果由于某种原因，浏览器在断点下面调整大小，则边距只会更改为继承。

一些变更

您可能会注意到div略低于一半。这可能只是jQuery如何检索高度的数学错误。只需添加任何您想要编辑它的常量。

// Where 20 is in pixels
var topMargin = (totalMargin / 2) - 20;

如果您想将左侧div居中，那么它总是位于 A 和 C 之间，您只需更改topMargin计算即可使用 A div的高度。

如果您有任何疑问，请告诉我们！

$(document).ready(function() {
  var breakpoint = 768;

  if ($(window).width() > breakpoint) {
    var totalMargin = $(window).height() - $('#vertCenter').height();
    var topMargin = totalMargin / 2;
    $('#vertCenter').css('margin-top', topMargin);
  }

  $(window).resize(function(){
    if ($(window).width() > breakpoint) {
      var totalMargin = $(window).height() - $('#vertCenter').height();
      var topMargin = totalMargin / 2;
    
      $('#vertCenter').css('margin-top', topMargin);
    } else {
      $('#vertCenter').css('margin-top', 'inherit');
    }
  });
});

.section-a,
.section-c {
  font-size: 2em;
}
.section-b {
  font-size: 4em;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="test"></div>

    <div class="col-xs-12 col-sm-6 pull-right">
      <div class="section-a well well-lg">A</div>
    </div>

    <div class="col-xs-12 col-sm-6">
      <div id="vertCenter" class="section-b well well-lg">B</div>
    </div>

    <div class="col-xs-12 col-sm-6 pull-right">
      <div class="section-c well well-lg">C</div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

如何在Bootstrap中垂直居中未知高度的浮动元素？

1 个答案: