Question

我对响应式设计有点新意，我在引导程序中使用push pull有一些问题。

第一个问题是写这样的行是否正确？

<div class="row">
        <div class="col-xs-12 col-md-6">
            <h1>Projects:</h1>
        </div>

        <div class="col-xs-12 col-md-6">
            <textarea class="form-control preventEdit" rows="5" style="min-width: 100%" disabled>PRO</textarea>
        </div>
        <div class="col-xs-12 col-md-6">
            <h1>Description:</h1>
        </div>

        <div class="col-xs-12 col-md-6">
            <textarea class="form-control preventEdit" rows="5" style="min-width: 100%" disabled>DES</textarea>
        </div>
    </div>

所以在这个时刻我会在超小型设备上看到这样的东西：

| TEXT1 |

| BOX1 |

| TEXT2 |

| BOX2 |

但我需要在中等和更大的情况下使布局看起来像这样

| TEXT1 || TEXT2 |

| BOX1 || BOX2 |

尝试用推拉进行，但结果与我想要的完全不同。盒子飞走了。

我试过的代码：

<div class="row">
        <div class="col-xs-12 col-md-6">
            <h1>Projects:</h1>
        </div>

        <div class="col-xs-12 col-md-6 col-md-push-6 ">
            <textarea class="form-control preventEdit" rows="5" style="min-width: 100%" disabled>PRO</textarea>
        </div>
        <div class="col-xs-12 col-md-6 col-md-pull-6">
            <h1>Description:</h1>
        </div>

        <div class="col-xs-12 col-md-6">
            <textarea class="form-control preventEdit" rows="5" style="min-width: 100%" disabled>DES</textarea>
        </div>
    </div>

如何获得我需要的结果？

提前感谢您的帮助。

Answer 1

您可以将每个文本/框组合视为单个实体，而不必担心推/拉：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <div>
        <h1>Projects:</h1>
        <textarea class="form-control preventEdit" rows="5" style="min-width: 100%" disabled>PRO</textarea>
      </div>
    </div>

    <div class="col-xs-12 col-md-6">
      <div>
        <h1>Description:</h1>
        <textarea class="form-control preventEdit" rows="5" style="min-width: 100%" disabled>DES</textarea>
      </div>
    </div>
  </div>
</div>

＆＃13;

Bootstrap推/拉问题

1 个答案: