Question

我正在尝试在bootstrap中构建一个2列表单布局，右侧是固定高度textarea。我在桌面屏幕上运行得很好，在textarea框上有一个.pull-right-md（自己的类）。但在“响应”模式（在较小的屏幕上）我有框的顺序问题。我希望textarea在小屏幕上显示时位于最后位置。我已经尝试通过使用.col-*-pull和.col-*-push类命令col来解决此问题，但它无效。

在这里，您可以看到我到目前为止所做的工作：http://www.bootply.com/BBFB4Tt97j

您对我如何解决这个问题有什么想法吗？

Answer 1

这就是我的建议，尝试用拉力和推力来解决问题，但我还没有找到解决方案。您可以使用hidden-xs，visible-xs创建两个不同的文本区域，一个仅在小屏幕上可见，另一个仅在大屏幕上可见。但是，您确保在处理表单时，处理两个不同的文本区域。

<form class="">
    <div class="col-md-6 col-sm-12 form-group pull-right-md hidden-sm hidden-xs">
        <textarea class="form-control textarea-fixed-height" id="textarea" name="textarea">default text</textarea>
    </div>
    <div class="col-md-6 col-sm-12 form-group">
        <input class="form-control" id="inputEmail3" placeholder="Name" type="text">
    </div>
    <div class="col-md-6 col-sm-12 form-group">
        <input class="form-control" id="inputPassword3" placeholder="Email" type="email">
    </div>
    <div class="col-md-6 col-sm-12 form-group">
        <input class="form-control" id="inputPassword3" placeholder="Telefon" type="text">
    </div>
    <div class="col-md-6 col-sm-12 form-group">
        <input class="form-control" id="inputPassword3" placeholder="Betreff" type="text">
    </div>
    <div class="col-md-6 col-sm-12 form-group pull-right-md hidden-lg hidden-md">
        <textarea class="form-control textarea-fixed-height" id="textarea1" name="textarea1">default text</textarea>
    </div>
</form>

Bootply link

Answer 2

为了造型，我不会复制html元素，它不值得！你破坏了语义，并产生了难以维护的不合逻辑的代码。

您可以轻松实现所需效果，而无需复制任何内容：

http://output.jsbin.com/debenudiqi/2/

你可以在这里获取代码

http://jsbin.com/debenudiqi/2/edit

Answer 3

因此，对于遇到问题解决方案的所有问题的每个人：http://www.bootply.com/BBFB4Tt97j#

我在textareas - 标记中添加了两个form。一个作为第一个框，第二个作为最后一个位置但在提交按钮之前。在第一个textarea上使用.hidden-xs和.hidden-sm时，对于较小的设备，.hidden-md和.hidden-lg不可见，我会阻止textarea - 标记显示在较大的设备上屏幕。

现在工作正常.. thx

Bootstrap - 2列形式布局，具有固定的textarea高度和列排序

3 个答案:

Bootply link