html - 更改容器在 Bootstrap 中的位置

Question

我仍在学习 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 中移动东西吗？

谢谢

Answer 1

您可以像您所做的那样使用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>