我的html文档的主体由3个元素组成,一个按钮,一个表单和一个画布.我希望按钮和窗体右对齐,画布保持左对齐.问题是,当我尝试对齐前两个元素时,它们不再相互跟随而是水平相邻？继承了我到目前为止的代码,我希望表单在右边的按钮之后直接跟随两者之间没有空间.
#cTask {
background-color: lightgreen;
}
#button {
position: relative;
float: right;
}
#addEventForm {
position: relative;
float: right;
border: 2px solid #003B62;
font-family: verdana;
background-color: #B5CFE0;
padding-left: 10px;
}<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="timeline.js"></script>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" />
</head>
<body bgcolor="000" TEXT="FFFFFF">
<div id="button">
<button onclick="showForm()" type="button" id="cTask">
Create Task
</button>
</div>
<div id="addEventForm">
<form>
<p><label>Customer name: <input></label></p>
<p><label>Telephone: <input type=tel></label></p>
<p><label>E-mail address: <input type=email></label></p>
</form>
</div>
<div>
<canvas id="myBoard" width="1000" …我的问题很简单,但我没有找到一个正确的方法(我的意思是不使用相对位置容器内的子元素的绝对位置)来实现Bootstrap 4中的这个.
我有一排col-8和col-4.我在col-4中的内容必须正确对齐,因此其内容位于右边界.
<h1 class="col-md-8">Applications portfolio</h1>
<div class="btn-group col-md-4" role="group">
<p class="float-right">
<a class="btn btn-secondary btn-md" href="#">
<i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
<a class="btn btn-md btn-secondary" href="#">
<i class="fa fa-flag" aria-hidden="true"></i> Report</a>
</p>
</div>
这是一个codepen:
https://codepen.io/anon/pen/QpzVgJ
我希望我的两个按钮在col-4中正确对齐.
如何在Bootstrap 4中正确对齐col中的正确元素？
css flexbox twitter-bootstrap twitter-bootstrap-4 bootstrap-4