Question

我有响应式设计的问题。所以我有组件：

这是代码：

                    <div class="row">
                        <div class="col-md-7 pull-left">
                            <div class="form-group">
                                <label>City</label>
                                <input type="text" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="form-group">
                                <label>Postal code</label>
                                <input type="text" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-7 pull-left">
                            <div class="form-group">
                                <label>Street</label>
                                <input type="text" class="form-control">                                    
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="form-group">
                                <label>House</label>
                                <input type="text" class="form-control">                                    
                            </div>
                        </div>
                    </div>

问题是当我改变窗户的大小时 - 我有这个丑陋的破坏设计：

我如何解决它？（只有在可能的情况下自助）

更新

使用建议我向所有列添加了左拉，一切正常。

但是当我有点小小的尺寸时会有结果：

Answer 1

现在有点猜测，不确定您是否希望表单项重新流动。预期结果是什么？每个输入应该在它自己的行上（即4行输入）吗？或者每行的两个输入是否应保持所有大小？

这是一个答案，将每个输入放在断点处的自己的行上。

从每行的第一列中删除.pull-left。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

<div class="container">
  <div class="row">
    <div class="col-md-7">
      <div class="form-group">
        <label>City</label>
        <input type="text" class="form-control">
      </div>
    </div>
    <div class="col-md-5">
      <div class="form-group">
        <label>Postal code</label>
        <input type="text" class="form-control">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-7">
      <div class="form-group">
        <label>Street</label>
        <input type="text" class="form-control">
      </div>
    </div>
    <div class="col-md-5">
      <div class="form-group">
        <label>House</label>
        <input type="text" class="form-control">
      </div>
    </div>
  </div>
</div>

以下是每行维护两个输入的解决方案。您需要使用不同的列类。目前您正在使用中型-md-课程。在这里，我使用了额外的小-xs-类。有关不同的列类，请参阅Bootstrap Grid Options。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

<div class="container">
  <div class="row">
    <div class="col-xs-7">
      <div class="form-group">
        <label>City</label>
        <input type="text" class="form-control">
      </div>
    </div>
    <div class="col-xs-5">
      <div class="form-group">
        <label>Postal code</label>
        <input type="text" class="form-control">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-7">
      <div class="form-group">
        <label>Street</label>
        <input type="text" class="form-control">
      </div>
    </div>
    <div class="col-xs-5">
      <div class="form-group">
        <label>House</label>
        <input type="text" class="form-control">
      </div>
    </div>
  </div>
</div>

Answer 2

我认为您只需将“左拉”添加到所有列<div>标记中，如下所述：

                     <div class="row">
                        <div class="col-md-7 pull-left">
                            <div class="form-group">
                                <label>City</label>
                                <input type="text" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-5 pull-left">
                            <div class="form-group">
                                <label>Postal code</label>
                                <input type="text" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-7 pull-left">
                            <div class="form-group">
                                <label>Street</label>
                                <input type="text" class="form-control">                                    
                            </div>
                        </div>
                        <div class="col-md-5 pull-left">
                            <div class="form-group">
                                <label>House</label>
                                <input type="text" class="form-control">                                    
                            </div>
                        </div>
                    </div>

我能够得到不错的结果。

Bootstrap inline 2表单，上面有标签输入

2 个答案: