如何在Bootstrap 4中垂直对齐? [英] How to vertically align in Bootstrap 4?

查看：56
本文介绍了如何在Bootstrap 4中垂直对齐?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在Bootstrap 4(4.0.0-alpha.6)的中心垂直对齐巨无霸的内容.在Mac桌面上的Chrome和Safari上，这种情况发生的很好，但在我的iOS设备上，文本仍与顶部对齐，这两种情况都没有.

我正在强迫超大显示器以最小高度显示高于其他高度的高度，以容纳背景图片.

这是HTML ... 

<!-- jumbotron -->
<div class="jumbotron jumbotron-fluid mb-0 cxt-bg-dark-grey cxt-bgimg-frame cxt-bgimg-tint cxt-bgimg-cook text-white text-center" style="min-height:500px"> <!-- .jumbotron-fluid and content in .container make jumbotron full-width and squared corners, cf. https://v4-alpha.getbootstrap.com/components/jumbotron/  -->
  <div class="container">
    <div class="row">
      <div class="col-md-12 cxt-title">
        <h1 class="display-4 pb-2">Jumbotron title</h1>
        <p class="lead pb-4">Sub-title sub-title sub-title v sub-title sub-title sub-title sub-title </p>
        <a class="btn btn-primary pmd-ripple-effect btn-lg mb-4" href="#" role="button">Get Started</a>
      </div>
    </div>
  </div>
</div>

这是CSS ... 

.cxt-bgimg-frame {
  width:100%;
  height:100%;
  height:calc(100% - 1px);
  -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size: cover;
  background-size: cover;
  display: flex;
  align-items: center;
}
.cxt-bgimg-tint {
  background-color: rgba(10,10,10,0.6);
  background-blend-mode: multiply;
}
.cxt-bgimg-cook {
  background-image:url('path/to/my/image.png');
}

关键部分是... 

display: flex;
align-items: center;

正如我所说，它可以在台式机上正常工作，但不能在iPad等iOS设备上运行.

我还尝试添加一些Webkit引用... 

.cxt-bgimg-frame {
  width:100%;
  height:100%;
  height:calc(100% - 1px);
  -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size: cover;
  background-size: cover;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
 -ms-flex-align: center;
 -webkit-align-items: center;
 -webkit-box-align: center;
 align-items: center;
}

...但这并不能解决问题.

根据发布文档，我知道从Bootstrap 4.0.0 alpha 6开始，"Bootstrap 4现在默认为flexbox！"但是我不知道这是否否定了我调用上面的flex东西的必要性.

我如何正确地使物体垂直居中对齐?

解决方案应该是以Bootstrap 4为中心的解决方案.

解决方案

要了解是否可以在特定设备上使用flexbox，需要仔细查看设备的系统+浏览器版本和 caniuse flexbox .

要为您的CSS加上前缀，请使用 autoprefixer .为了获得最大的浏览器兼容性，请在页面底部的小设置框中输入> 0%.

如果您执行了上述所有操作，则代码应可以在具有iOS 7.0或更高版本的任何设备上正确呈现.

在当前形式下，您的代码不提供跨浏览器的flexbox解决方案，也不使用Bootstrap 4的flexbox实现，这就是您在iOS设备上遇到麻烦的原因. 为了集中使用Bootstrap的flexbox类，您需要:

  • 在父级上应用.d-flex和.justify-content-center
  • 在同一个父对象上应用足够的min-height
  • 在孩子上应用.align-self-center

示例:

 .cxt-bgimg-frame {
  min-height:100vh;
  background: url('http://lorempixel.com/g/1024/768') no-repeat 50% 50% /cover;
}

.align-self-center.p-3 {
  background-color: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.21);
  box-shadow: 0 6px 6px -3px rgba(0,0,0,.2), 0 10px 14px 1px rgba(0,0,0,.14), 0 4px 18px 3px rgba(0,0,0,.12);
}

body {margin: 0;} 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>


<div class="jumbotron jumbotron-fluid mb-0 cxt-bg-dark-grey cxt-bgimg-frame cxt-bgimg-tint cxt-bgimg-cook text-white d-flex justify-content-center"> 
  <div class="container align-self-center">
    <div class="row">
      <div class="col-md-12 cxt-title d-flex justify-content-center"  style="min-height:70vh">
        <div class="align-self-center text-center p-3">
          <h1 class="display-4 pb-2">Jumbotron title</h1>
          <p class="lead pb-4">Sub-title sub-title sub-title v sub-title sub-title sub-title sub-title </p>
          <a class="btn btn-primary pmd-ripple-effect btn-lg mb-4" href="#" role="button">Get Started</a>
        </div>
      </div>
    </div>
  </div>
</div>

回答您的评论问题:

我上面提供的示例是 generic ，旨在帮助需要Bootstrap 4的flexbox居中示例的任何人.您可以完全自由地对其进行更改，以适应项目的特定需求.

  1. 我在该框中添加了样式，以便您可以看到它.当然，您无需在项目中应用颜色/阴影.
  2. 不一定.它取决于flex-direction.为了更好地理解flexbox模型，我建议 a guide to flexbox 和 current specs .
  3. a)vh的意思是视口高度/100"-与100%完全不同，因为100%可以是视口高度的5倍，具体取决于您的内容，而100vh始终是视口高度.在当今的网络中，vh十分流行，因为它使您可以使用全页高度面板" ，它可以与scollTo()类型的导航一起使用.如果导航栏固定，则可以使用min-height: calc(100vh - Npx)，其中N是px中导航栏的大小.
    b)是的，斜杠/是有意的，它表示背景大小".请参阅 background 速记.

I am trying to vertically align the contents of my jumbotron at center in Bootstrap 4 (4.0.0-alpha.6). This happens fine in Chrome and Safari on the Mac desktop, but neither on my iOS devices, where the text still aligns to the top.

I am forcing the jumbotron to display taller than it otherwise would with min-height, to accommodate a background picture.

Here is the HTML...

<!-- jumbotron -->
<div class="jumbotron jumbotron-fluid mb-0 cxt-bg-dark-grey cxt-bgimg-frame cxt-bgimg-tint cxt-bgimg-cook text-white text-center" style="min-height:500px"> <!-- .jumbotron-fluid and content in .container make jumbotron full-width and squared corners, cf. https://v4-alpha.getbootstrap.com/components/jumbotron/  -->
  <div class="container">
    <div class="row">
      <div class="col-md-12 cxt-title">
        <h1 class="display-4 pb-2">Jumbotron title</h1>
        <p class="lead pb-4">Sub-title sub-title sub-title v sub-title sub-title sub-title sub-title </p>
        <a class="btn btn-primary pmd-ripple-effect btn-lg mb-4" href="#" role="button">Get Started</a>
      </div>
    </div>
  </div>
</div>

Here is the CSS...

.cxt-bgimg-frame {
  width:100%;
  height:100%;
  height:calc(100% - 1px);
  -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size: cover;
  background-size: cover;
  display: flex;
  align-items: center;
}
.cxt-bgimg-tint {
  background-color: rgba(10,10,10,0.6);
  background-blend-mode: multiply;
}
.cxt-bgimg-cook {
  background-image:url('path/to/my/image.png');
}

The key part is...

display: flex;
align-items: center;

As I said, it works fine on desktop, but not iOS devices like my iPad.

I have also tried adding some webkit references...

.cxt-bgimg-frame {
  width:100%;
  height:100%;
  height:calc(100% - 1px);
  -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size: cover;
  background-size: cover;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
 -ms-flex-align: center;
 -webkit-align-items: center;
 -webkit-box-align: center;
 align-items: center;
}

... But that doesn't fix it.

I know, according to the release docs, that, as of Bootstrap 4.0.0 alpha 6, "Bootstrap 4 is now flexbox by default!" But I don't know whether that negates the need for me to call the flex stuff above.

How do I correctly get things to vertically align at center?

Solution should be a Bootstrap 4-centric solution.

解决方案

To find out if you can use flexbox on a specific device, you need to look closer at the system + browser versions of your device and at caniuse flexbox.

For prefixing your CSS, use autoprefixer. For maximum browser compat, input > 0% in the tiny settings box at the bottom of the page.

If you did all of the above, your code should render correctly on any device featuring iOS 7.0 or above.

In its current form, your code doesn't provide a cross-browser flexbox solution, nor is it using Bootstrap 4's flexbox implementation, which is why you have trouble on iOS devices.
In order to center using Bootstrap's flexbox classes, you need to:

  • apply .d-flex and .justify-content-center on parent
  • apply a sufficient min-height on the same parent
  • apply .align-self-center on the child

Example: 

.cxt-bgimg-frame {
  min-height:100vh;
  background: url('http://lorempixel.com/g/1024/768') no-repeat 50% 50% /cover;
}

.align-self-center.p-3 {
  background-color: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.21);
  box-shadow: 0 6px 6px -3px rgba(0,0,0,.2), 0 10px 14px 1px rgba(0,0,0,.14), 0 4px 18px 3px rgba(0,0,0,.12);
}

body {margin: 0;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>


<div class="jumbotron jumbotron-fluid mb-0 cxt-bg-dark-grey cxt-bgimg-frame cxt-bgimg-tint cxt-bgimg-cook text-white d-flex justify-content-center"> 
  <div class="container align-self-center">
    <div class="row">
      <div class="col-md-12 cxt-title d-flex justify-content-center"  style="min-height:70vh">
        <div class="align-self-center text-center p-3">
          <h1 class="display-4 pb-2">Jumbotron title</h1>
          <p class="lead pb-4">Sub-title sub-title sub-title v sub-title sub-title sub-title sub-title </p>
          <a class="btn btn-primary pmd-ripple-effect btn-lg mb-4" href="#" role="button">Get Started</a>
        </div>
      </div>
    </div>
  </div>
</div>

Answers to your comment questions:

The example I provided above is generic, aimed at helping anyone needing an example on Bootstrap 4's flexbox centering. You are completely free to change it to fit the specific needs of your project.

  1. I added the styling to that box so you could see it. Of course you don't need to apply colors/shadows in your project.
  2. Not necessarily. It depends on flex-direction. For a better understanding of the flexbox model I recommend a guide to flexbox and current specs.
  3. a) vh means "viewport height/100" - it's completely different from 100%, because 100% can be 5 times the viewport height, depending on your content, while 100vh is always the viewport height. In today's web, vh is quite popular, as it enables you to have "full page height panels" which could be used with scollTo() type navigation. If you have a fixed navbar, you can use min-height: calc(100vh - Npx) where N is the size of your navbar in px.
    b) Yes, the slash / is intentional and it means "background-size". See background shorthand.

这篇关于如何在Bootstrap 4中垂直对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆