Bootstrap push/pull 个问题

Question

我是响应式设计的新手，我在使用推拉时遇到了一些问题 bootstrap。

第一个问题这样写行对吗？

<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

您可以将每个 text/box 组合视为一个单独的实体，而不必担心 push/pulls:

<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>

Bootstrap push/pull 个问题

Bootstrap push/pull questions

frontend

twitter-bootstrap