我仍在学习 bootstrap,我想知道我应该使用什么在 bootstrap 容器内移动东西。 我的问题有点奇怪,但也许用图片和代码会更容易理解。
我想在那个精确的位置创建一个表单,就像在 this 中一样图片,但我不知道该怎么做。我不明白如果我想在行或容器中更改/应用 css,我是否必须应用边距或填充。
此时我的网站看起来像this我的代码是这个:
<div id="form">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-offset-7">
<form class="form-group">
<label for="testEmail">Email address</label>
<input type="email" class="form-control" id="testEmail" placeholder="Email">
</form>
</div>
</div>
</div>
</div>
你们能解释一下我如何改变我的表格位置以及它应该如何在 bootstrap 中移动东西吗?
谢谢
最佳答案
您可以像您所做的那样使用offset
。但在这里我更喜欢在 row
中创建 div
的 Columns
。请查看这个:(全屏查看以检查布局)
form {
border-radius: 2px;
border: 1px solid green;
padding: 15px;
}
#form {
margin-top: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="form">
<div class="container">
<div class="row">
<div class="hidden-xs col-lg-3">test1</div>
<div class="col-xs-6 col-lg-3">test2</div>
<div class="col-xs-6 col-lg-4">
<form class="form-group">
<label for="testEmail">Email address</label>
<input type="email" class="form-control" id="testEmail" placeholder="Email">
</form>
</div>
<div class="hidden-xs col-lg-2">test3</div>
</div>
</div>
</div>
关于html - 更改容器在 Bootstrap 中的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40696360/