Question

我有一个简单的表单，希望它在大型设备上是水平的，在twitter-bootstrap-3的小型设备上是垂直的。

我的工作响应很快，但它并没有在小型设备上切换到垂直风格..这不可能吗？

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-offset-1 col-md-10">
            <form method="POST" action="...url.." class="form-horizontal">
                <div class="form-group">
                    <label for="telefon" class="control-label col-xs-3">Telefon</label>
                   <div class="col-xs-8">
                       <input type="text" name="telefon" class="form-control">
                   </div>
                </div>
                <div class="form-group">
                    <label for="email" class="control-label col-xs-3">Email</label>
                    <div class="col-xs-8">
                        <input type="email" name="email" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-6">
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </div>                    
            </form>
        </div> 
    </div>
</div>

http://jsfiddle.net/quyw5fnL/

编辑：我想在大屏幕上看起来像这样： Label1: Inputbox1 Label2: Inputbox2

在像这样的小屏幕上： Label1: Inputbox1 Label2: Inputbox2

Answer 1

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-offset-1 col-md-10">
            <form method="POST" action="...url.." class="form-inline">
                <div class="form-group">
                <label for="telefon" class="">Telefon</label>
              <input type="text" name="telefon" class="form-control">
                </div>
                <div class="form-group">
                    <label for="email" class="">Email</label>
                        <input type="email" name="email" class="form-control">
                </div>
                <div class="form-group">

                        <button type="submit" class="btn btn-primary">Save</button>

                </div>                    
            </form>
        </div> 
    </div>
</div>

Answer 2

刚才意识到从来没有给出正确答案。也许这只是为了简单，但为了完成和所有绊倒的人，这里是简单的答案：

<form method="POST" action="...something..." class="form-horizontal">

  <div class="form-group">
    <label for="" class="col-xs-12 col-sm-3 control-label">Name</label>
    <div class="col-xs-12 col-sm-9">
      <p class="form-control-static">John Muller</p>
    </div>
  </div>

  <div class="form-group">
    <label for="town" class="col-xs-12 col-sm-3 control-label">Town</label>
    <div class="col-xs-12 col-sm-9">
      <input type="text" name="town" class="form-control " placeholder="" value="New York">
    </div>
  </div>

  <div class="form-group">
    <label for="something" class="col-xs-12 col-sm-3 control-label">Something else</label>
    <div class="col-xs-12 col-sm-9">
      <input type="text" name="something" class="form-control " placeholder="" value="Got it">
    </div>
  </div>
</form>

重要的是在标签上设置col-xs-12和col-sm-3，在输入上设置col-xs-12和col-sm-9。

Fiddle

Bootstrap形式水平垂直响应

2 个答案: