如何使用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正確對齊元素？

回答

相關問題