Question

所以我知道之前已经问过这个问题，但我无法弄清楚为什么我无法将表单的输入字段集中在一行中。我希望它们堆叠在移动视图上。我做了一个小提琴here。任何帮助都会非常感激。

 <div class="container">
    <div class="row">
 <form>
      <div class="col-md-4 col-sm-4 col-xs-12 offset-5" >
    <label for="start"></label>
    <input type="text" id="start" class="date-input-css" name="start" placeholder="From">
      </div>
     <div class="col-md-4 col-sm-4 col-xs-12 offset-5" >
    <label for="end"></label>
    <input type="text" id="end" name="end" class="date-input-css" placeholder="To">
        </div>
    </form>
      </div>
    </div>

Answer 1

而不是在两个输入上的offset-5课程，而是在寻找班级col-md-offset-2和col-sm-offset-2，特别是在两个输入中的第一个上。请注意，对于Bootstrap 3，您需要在类名中指定col-和断点，因此简单的offset-2不会起作用。

它是您要查找的2的偏移量，因为Bootstrap列应始终加起来为12。由于您的输入均为4宽，因此您已经8，而4离开了2。这意味着2任意一侧，因此您只需将最左侧的输入偏移@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); div.center_me { border: 1px solid red; }，因为最右侧的输入将自动偏移。

这可以在以下内容中看到：

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <form>
      <div class="col-md-4 col-sm-4 col-xs-12 col-md-offset-2 col-sm-offset-2 center_me">
        <label for="start"></label>
        <input type="text" id="start" class="date-input-css" name="start" placeholder="From">
      </div>
      <div class="col-md-4 col-sm-4 col-xs-12 center_me">
        <label for="end"></label>
        <input type="text" id="end" name="end" class="date-input-css" placeholder="To">
      </div>
    </form>
  </div>
</div>

＆＃13;

@media query max-width

＆＃13;

自举中心水平输入

1 个答案: