3 개 요소가 있는데 화면의 오른쪽에 단추를 맞추려고하는데 문제가 있습니다.트위터 부트 스트랩을 사용하여 요소를 올바르게 정렬하려면 어떻게합니까?
<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>
클래스 '당겨 받기'를 시도해보십시오.
<div class="pull-right">...</div>
정당화 컨텐츠 엔드
을 부트 스트랩 문서에서 활용이
<a href = "link_to_img.html" class = 'btn btn-success pull-right'>Grab it!</a>
같은 것을 시도하십시오, 그것은 말한다 :
부트 스트랩 3은 navbar 정렬에 .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>
참고 : 당신은에 '당겨 오른쪽을'클래스를 적용해야합니다 요소는 부모/컨테이너가 아닌 오른쪽 정렬이 필요합니다. – Dhaust
@Stefan 감사합니다. 고마워요. 고마워요. – whitesiroi