css - 使用 css 将 bootstrap 表单组元素对齐到 50%

Question

我们需要在右侧制作一些宽度为 50% 的表单元素。我们通过一些 api 请求获得完整的 bootstrap 3 表单，因此我们无法更改表单的结构。它是标准的 bootstrap 3 形式。在下面的示例中，我们只想将最后一个字段移动到宽度为 50% 的右侧总表格宽度。

    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
// this needs to move right with width 50% including the label 
      <div class="form-group">
        <label for="fieldtoBeright">Right Field</label>
        <input type="text" class="form-control" id="fieldtoBeright" placeholder="Right field">
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>

我们已尝试应用 css，但要么所有元素都在右侧移动，要么标签没有移动但字段已正确移动。请为此提供帮助。

Answer 1

Simply Add class {col-sm-offset-6}. Shifts 50% only in tabs and desktop for mobile also then add class {col-xs-offset-6}.