PROSAGA码农传奇-Bootstrap-与Bootstrap 3垂直对齐

15 条回复

0#
回复此人
荧惑 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我想我会分享我的“解决方案”，以防它帮助其他不熟悉@media查询的人。 </p> <P> 感谢@HashemQolami的回答，我构建了一些媒体查询，这些查询可以像col- *类一样移动起来，这样我就可以堆叠col- *用于移动设备，但是在中心垂直对齐显示大屏幕，例如 </p> <pre> <code> <div class='row row-sm-flex-center'> <div class='col-xs-12 col-sm-6'></div> <div class='col-xs-12 col-sm-6'></div> </div> </code> </pre> <P> 。 </p> <pre> <code> .row-xs-flex-center { display:flex; align-items:center; } @media ( min-width:768px ) { .row-sm-flex-center { display:flex; align-items:center; } } @media ( min-width: 992px ) { .row-md-flex-center { display:flex; align-items:center; } } @media ( min-width: 1200px ) { .row-lg-flex-center { display:flex; align-items:center; } } </code> </pre> <P> 每个屏幕分辨率需要不同列数的更复杂的布局（例如，-xs为2行，-sm为3，-md为4等）需要更高级的finagling，但对于带-xs的简单页面堆叠和-sm和更大的行，这工作正常。 </p> </DIV>

编辑
1#
回复此人
Just do it | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 有几种方法可以做到 </p> <P> 1。 </p> <pre> <code> display: table-cell; vertical-align: middle; </code> </pre> <P> 以及容器的css </p> <pre> <code> display:table; </code> </pre> <ol start =“2”> <LI> <P> 使用填充和媒体屏幕相对于屏幕大小更改填充。谷歌@media屏幕了解更多 </p> </LI> <LI> <P> 使用相对填充即以％表示填充 </p> </LI> </醇> <P> 希望能帮助到你 </p> </DIV>

编辑
2#
回复此人
老人与海 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> HTML </p> <pre> <code> <div class="row"> <div class="col-xs-2 pull-bottom" style="height:100px;background:blue"> </div> <div class="col-xs-8 pull-bottom" style="height:50px;background:yellow"> </div> </div> </code> </pre> <P> CSS </p> <pre> <code> .pull-bottom { display: inline-block; vertical-align: bottom; float: none; } </code> </pre> </DIV>

编辑
3#
回复此人
咿呀哟 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我刚刚做了这个，它做了我想做的事。 </p> <pre> <code> .align-middle { margin-top: 25%; margin-bottom: 25%; } </code> </pre> <P> 现在我的页面看起来像 </p> <pre> <code> <div class='container-fluid align-middle'> content ---------------------------------- | | | -------------------------- | | | | | | | | | | | | | | | | | | | | | | -------------------------- | | | ---------------------------------- </code> </pre> </DIV>

编辑
4#
回复此人
不浪漫 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是我的解决方案。只需将此类添加到您的CSS。 </p> <pre> <code> .align-middle { display:flex; justify-content:center; align-items:center; } </code> </pre> <P> 然后你的HTML看起来像这样。 </p> <pre> <code> <div class="col-xs-12 align-middle"> <div class="col-xs-6" style="background-color:blue;"> <h3>Item</h3> <h3>Item</h3> </div> <div class="col-xs-6" style="background-color:red;"> <h3>Item</h3> </div> </div> </code> </pre> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> .align-middle { display:flex; justify-content:center; align-items:center; } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <!DOCTYPE html> <title>Title</title> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-12 align-middle"> <div class="col-xs-6" style="background-color:blue;"> <h3>Item</h3> <h3>Item</h3> </div> <div class="col-xs-6" style="background-color:red;"> <h3>Item</h3> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
5#
回复此人
十二* | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用Bootstrap 4（目前处于alpha版本），您可以使用 <code> .align-items-center </code> 类。所以你可以保持Bootstrap的响应特性。工作对我来说很好。看到 <a href="https://v4-alpha.getbootstrap.com/layout/grid/#vertical-alignment" rel="nofollow noreferrer"> Bootstrap 4文档 </A> 。 </p> </DIV>

编辑
6#
回复此人
Little it | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 自Bootstrap 4添加以来，本机支持Flex行为 <code> d-flex align-items-center </code> 在里面 <code> row </code> DIV。您不再需要修改您的CSS。 </p> <P> 简单的例子： <a href="http://jsfiddle.net/vgks6L74/" rel="nofollow noreferrer"> http://jsfiddle.net/vgks6L74/ </A> </p> <pre> <code>  <div class="row d-flex align-items-center"> <div class="col-5 border border-dark" style="height:10em"> Big </div> <div class="col-2 border border-danger" style="height:3em"> Small </div> </div> </code> </pre> <P> 用你的例子： <a href="http://jsfiddle.net/7zwtL702/" rel="nofollow noreferrer"> http://jsfiddle.net/7zwtL702/ </A> </p> <pre> <code>  <div class="row d-flex align-items-center"> <div class="col-5"> <div class="border border-dark" style="height:10em">Big</div> </div> <div class="col-2"> <div class="border border-danger" style="height:3em">Small</div> </div> </div> </code> </pre> <P> 资源： <a href="https://getbootstrap.com/docs/4.0/utilities/flex/" rel="nofollow noreferrer"> https://getbootstrap.com/docs/4.0/utilities/flex/ </A> </p> </DIV>

编辑
7#
回复此人
喜欢一个人 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 不需要桌子和桌子。使用变换可以轻松实现。例： <a href="http://codepen.io/arvind/pen/QNbwyM" rel="noreferrer"> http://codepen.io/arvind/pen/QNbwyM </A> </p> <P> 码： </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> .child { height: 10em; border: 1px solid green; position: relative; } .child-content { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="row parent"> <div class="col-xs-6 col-lg-6 child"> <div class="child-content"> <div style="height:4em;border:1px solid #000">Big</div> </div> </div> <div class="col-xs-6 col-lg-6 child"> <div class="child-content"> <div style="height:3em;border:1px solid #F00">Small</div> </div> </div> </div> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
8#
回复此人
老夫的少女心 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我遇到了同样的情况，我想在一行中垂直对齐几个div元素，发现Bootstrap类col-xx-xx将样式应用于div：float：left。 </p> <P> 我必须在div元素上应用样式，如style =“Float：none”，并且所有div元素都垂直对齐。这是工作示例： </p> <pre> <code> <div class="col-lg-4" style="float:none;"> </code> </pre> <H2> <a href="http://jsfiddle.net/shatherali/g9ew460c/4/" rel="nofollow noreferrer"> JsFiddle链接 </A> </H2> <P> 以防有人想要阅读有关float属性的更多信息： </p> <H2> <a href="http://www.w3schools.com/cssref/pr_class_float.asp" rel="nofollow noreferrer"> W3Schools - Float </A> </H2> </DIV>

编辑
9#
回复此人
晴天？霹雳 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> div{ border:1px solid; } span{ display:flex; align-items:center; } .col-5{ width:100px; height:50px; float:left; background:red; } .col-7{ width:200px; height:24px; float:left; background:green; } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <span> <div class="col-5"> </div> <div class="col-7"></div> </span> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
10#
回复此人
晴天3 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我详细说明了一下 <a href="https://stackoverflow.com/a/20548578/4730719"> zessx的回答 </A> ，以便在不同的屏幕尺寸上混合不同的列尺寸时更容易使用。 </p> <P> 如果你使用 <a href="http://en.wikipedia.org/wiki/Sass_%28stylesheet_language%29" rel="nofollow noreferrer"> 萨斯 </A> ，你可以将它添加到你的scss文件： </p> <pre> <code> @mixin v-col($prefix, $min-width) { @media (min-width: $min-width) { .col-#{$prefix}-v { display: inline-block; vertical-align: middle; float: none; } } } @include v-col(lg, $screen-lg); @include v-col(md, $screen-md); @include v-col(sm, $screen-sm); @include v-col(xs, $screen-xs); </code> </pre> <P> 这会生成以下CSS（如果您不使用Sass，可以直接在样式表中使用）： </p> <pre> <code> @media (min-width: 1200px) { .col-lg-v { display: inline-block; vertical-align: middle; float: none; } } @media (min-width: 992px) { .col-md-v { display: inline-block; vertical-align: middle; float: none; } } @media (min-width: 768px) { .col-sm-v { display: inline-block; vertical-align: middle; float: none; } } @media (min-width: 480px) { .col-xs-v { display: inline-block; vertical-align: middle; float: none; } } </code> </pre> <P> 现在，您可以在响应列上使用它，如下所示： </p> <pre> <code> <div class="container"> <div class="row"> <div class="col-sm-7 col-sm-v col-xs-12"> <p> This content is vertically aligned on tablets and larger. On mobile it will expand to screen width. </p> </div><div class="col-sm-5 col-sm-v col-xs-12"> <p> This content is vertically aligned on tablets and larger. On mobile it will expand to screen width. </p> </div> </div> <div class="row"> <div class="col-md-7 col-md-v col-sm-12"> <p> This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width. </p> </div><div class="col-md-5 col-md-v col-sm-12"> <p> This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width. </p> </div> </div> </div> </code> </pre> </DIV>

编辑
11#
回复此人
Jacob | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 试试这个， </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> .exe { font-size: 0; } .exe > [class*="col"] { display: inline-block; float: none; font-size: 14px; font-size: 1rem; vertical-align: middle; } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="row exe"> <div class="col-xs-5"> <div style="height:5em;border:1px solid grey">Big</div> </div> <div class="col-xs-5"> <div style="height:3em;border:1px solid red">Small</div> </div> </div> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
12#
回复此人
文艺青年3 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 好吧，不小心我混合了一些解决方案，它最终适用于我的布局，我试图在最小分辨率上制作一个带有Bootstrap列的3x3表。 </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> /* required styles */ #grid a { display: table; } #grid a div { display: table-cell; vertical-align: middle; float: none; } /* additional styles for demo: */ body { padding: 20px; } a { height: 40px; border: 1px solid #444; } a > div { width: 100%; text-align: center; } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div id="grid" class="clearfix row"> <a class="col-xs-4 align-center" href="#"> <div>1</div> </a> <a class="col-xs-4 align-center" href="#"> <div>2</div> </a> <a class="col-xs-4 align-center" href="#"> <div>3</div> </a> <a class="col-xs-4 align-center" href="#"> <div>4</div> </a> <a class="col-xs-4 align-center" href="#"> <div>5</div> </a> <a class="col-xs-4 align-center" href="#"> <div>6</div> </a> <a class="col-xs-4 align-center" href="#"> <div>7</div> </a> <a class="col-xs-4 align-center" href="#"> <div>8</div> </a> <a class="col-xs-4 align-center" href="#"> <div>9</div> </a> </div> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
13#
回复此人
1号 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <BLOCKQUOTE> <P> 这个答案提出了一个黑客，但我强烈建议你使用flexbox（如中所述） <a href="https://stackoverflow.com/a/25517025/1238019"> @Haschem回答 </A> ），因为它现在到处支持。 </p> </BLOCKQUOTE> <BLOCKQUOTE> <P> 的<strong> 演示链接： </强> <BR/> - <a href="https://www.bootply.com/jTZdTJGVzq" rel="noreferrer"> Bootstrap 3 </A> <BR/> - <a href="http://www.bootply.com/IXiEbZlLvP" rel="noreferrer"> Bootstrap 4 alpha 6 </A> <BR/> </p> </BLOCKQUOTE> <P> 您仍然可以在需要时使用自定义类： </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“false”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> .vcenter { display: inline-block; vertical-align: middle; float: none; } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <div class="row"> <div class="col-xs-5 col-md-3 col-lg-1 vcenter"> <div style="height:10em;border:1px solid #000">Big</div> </div><div class="col-xs-5 col-md-7 col-lg-9 vcenter"> <div style="height:3em;border:1px solid #F00">Small</div> </div> </div> </code> </pre> </DIV> </DIV> <P> </p> <P> 的<strong> <a href="http://www.bootply.com/dFP81frbHk" rel="noreferrer"> Bootply </A> </强> </p> <P> 运用 <code> inline-block </code> 如果你在代码中留出一个真正的空间，就会在块之间增加额外的空间（比如 <code> ...</div> </div>... </code> ）。如果列大小合计为12，则这个额外的空间会破坏我们的网格： </p> <pre> <code> <div class="row"> <div class="col-xs-6 col-md-4 col-lg-2 vcenter"> <div style="height:10em;border:1px solid #000">Big</div> </div> <div class="col-xs-6 col-md-8 col-lg-10 vcenter"> <div style="height:3em;border:1px solid #F00">Small</div> </div> </div> </code> </pre> <P> 在这里，我们之间有额外的空间 <code> <div class="[...] col-lg-2"> </code> 和 <code> <div class="[...] col-lg-10"> </code> （回车和2个标签/ 8个空格）。所以... </p> <P> <img src =“https://i.stack.imgur.com/2Yzby.png”alt =“在此处输入图片说明”/> </p> <P> 让我们踢出这个额外的空间！ </p> <pre> <code> <div class="row"> <div class="col-xs-6 col-md-4 col-lg-2 vcenter"> <div style="height:10em;border:1px solid #000">Big</div> </div><div class="col-xs-6 col-md-8 col-lg-10 vcenter"> <div style="height:3em;border:1px solid #F00">Small</div> </div> </div> </code> </pre> <P> <img src =“https://i.stack.imgur.com/XZTJj.png”alt =“在此输入图像说明”/> </p> <P> 请注意 <EM> 似乎 </EM> 无用的评论 <code>  </code> ？他们是的<strong> 重要 </强> - 没有他们，之间的空白 <code> <div> </code> 元素将占用布局中的空间，打破网格系统。 </p> <P> <EM> 注意：Bootply已更新 </EM> </p> </DIV>

编辑

登录后才能参与评论