我正在使用Bootstrap 4和这个CSS类来垂直对齐我的项目:
.vertical-align { display: flex; flex-direction: row; } .vertical-align > [class^="col-"], .vertical-align > [class*=" col-"] { display: flex; align-items: center; justify-content: flex-start; }有了这个,所有这些内容都与左边对齐。 例如,如何将列表(ul> li)对齐到右边? 我没有尝试过任何工作。
这是一个有效的演示:
.vertical-align { display: flex; flex-direction: row; } .vertical-align > [class^="col-"], .vertical-align > [class*=" col-"] { display: flex; align-items: center; justify-content: flex-start; }<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row vertical-align"> <div class="col-md-3" style="background-color: #f1f1f1;"> <div class="logo"> <img src="http://placehold.it/120x50" alt="" class="img-responsive"> </div> </div> <div class="col-md-6" style="background-color: #ffccff;"> <div class="catergorias"> <ul class="list-inline categorias_topo"> <li class="list-inline-item"> <a href="#">Categoria 1</a> </li> <li class="list-inline-item"> <a href="#">Categoria 2</a> </li> <li class="list-inline-item"> <a href="#">Categoria 3</a> </li> <li class="list-inline-item"> <a href="#">Categoria 4</a> </li> </ul> </div> </div> <div class="col-md-3" style="background-color: #f1f1f1;"> BUSCA </div> </div> </div>我也有一个JSFiddle: https ://jsfiddle.net/xcottg08/
I am using Bootstrap 4 and this CSS class to vertically align my items:
.vertical-align { display: flex; flex-direction: row; } .vertical-align > [class^="col-"], .vertical-align > [class*=" col-"] { display: flex; align-items: center; justify-content: flex-start; }With this, all this content is aligned to the left. How can I align, for example, the list (ul> li) to the right? Nothing I've tried is working.
Here is a working demo:
.vertical-align { display: flex; flex-direction: row; } .vertical-align > [class^="col-"], .vertical-align > [class*=" col-"] { display: flex; align-items: center; justify-content: flex-start; }<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row vertical-align"> <div class="col-md-3" style="background-color: #f1f1f1;"> <div class="logo"> <img src="http://placehold.it/120x50" alt="" class="img-responsive"> </div> </div> <div class="col-md-6" style="background-color: #ffccff;"> <div class="catergorias"> <ul class="list-inline categorias_topo"> <li class="list-inline-item"> <a href="#">Categoria 1</a> </li> <li class="list-inline-item"> <a href="#">Categoria 2</a> </li> <li class="list-inline-item"> <a href="#">Categoria 3</a> </li> <li class="list-inline-item"> <a href="#">Categoria 4</a> </li> </ul> </div> </div> <div class="col-md-3" style="background-color: #f1f1f1;"> BUSCA </div> </div> </div>I also have a JSFiddle: https://jsfiddle.net/xcottg08/
最满意答案
你应该使用justify-content: flex-end; 而不是justify-content:flex-start来证明内容是正确的。
您必须在这些规则中指定它
.vertical-align > [class^="col-"], .vertical-align > [class*=" col-"] {但是,我会创建一个新的类,如.vertical-align-right和一个额外的类到容器的列表(上面的.catergorias与类.col-md-6的div),因此代码如下所示:
.vertical-align-right > .list, justify-content: flex-end; }You should use justify-content: flex-end; instead of justify-content:flex-start to justify content to the right side.
You must specify it within these rules
.vertical-align > [class^="col-"], .vertical-align > [class*=" col-"] {However, I would create a new class like .vertical-align-right and one extra class to the container with list (the div above .catergorias with class .col-md-6), thus the code would look as follow:
.vertical-align-right > .list, justify-content: flex-end; }
更多推荐
发布评论