如何使用twitter bootstrap正确对齐元素？

我有3个元素，我试图将按钮对齐到屏幕的右侧，但这样做很麻烦。如何使用twitter bootstrap正确对齐元素？

<div class="container"> 
    <div class="row-fluid"> 
    <h4> 
     <img src="img.png" style="width:50px;"> 
     Title 
     <a href="link_to_img.html" class="btn btn-success">Grab it!</a> 
    </h4> 
    </div> 
</div>

来源

2013-03-14 sharataka

试试班'拉右'。

<div class="pull-right">...</div>

见http://getbootstrap.com/css/#helper-classes-floats

来源

2013-03-14 23:45:09 Stefan

注意：您必须将 '右拉' 级的你想要对齐的元素，而不是父/容器。 – Dhaust 2014-07-07 01:55:55

@Stefan谢谢，谢谢，谢谢。 – whitesiroi 2015-08-26 04:11:23

尝试这样的事情

<a href = "link_to_img.html" class = 'btn btn-success pull-right'>Grab it!</a>

来源

2013-03-14 23:46:31 trajce

利用证明内容的高端

从引导文件，它说：

引导程序3使用.navbar-left和.navbar-right进行导航栏对齐。

引导程序4使用各种帮助程序类。

（校准部件） https://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_navbars.cfm

这里更多信息有关新的定位 https://www.quackit.com/css/flexbox/tutorial/flexbox_alignment.cfm

<!DOCTYPE html> 
<html> 

<head> 
<link rel="stylesheet" href="style.css"> 
<script src="script.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
</head> 

<body> 

    <style> 
    .wrapper { 
     display: flex; 
     align-items: center; 
     background-color: beige; 
     height: 100vh; 
    } 

    .wrapper > div { 
     padding: 20px; 
     font-size: 4vw; 
     color: white; 
    } 

    .red { 
     background: orangered; 
    } 

    .green { 
     background: yellowgreen; 
    } 

    .blue { 
     background: steelblue; 
    } 

    body { 
     margin: 0; 
    } 
    </style> 
    <div class="wrapper justify-content-end"> 
    <div class="red">1</div> 
    <div class="green">2</div> 
    <div class="blue">3</div> 
    </div> 
</body> 

</html>

https://plnkr.co/edit/LtfW2fj9f3E9Ehj1M8jN?p=catalogue

来源

2017-06-01 08:33:54 Javier

如何使用twitter bootstrap正确对齐元素？

回答

相关问题