Bootstrap - 具有固定文本区域高度和列顺序的 2 列表单布局

Question

我正在尝试在 bootstrap 中构建一个 2 列表单布局，右侧有一个固定高度的文本区域。我让它在桌面屏幕上运行良好，文本框上有一个 .pull-right-md（自己的 class）。但是在 "responsive" 模式下（在较小的屏幕上）我对框的顺序有疑问。我希望 textarea 在小屏幕上显示时位于最后一个位置。我已经尝试通过使用 .col-*-pull 和 .col-*-push classes 订购 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

所以对于遇到同样问题的每个人来说，这就是我的问题的解决方案：http://www.bootply.com/BBFB4Tt97j#

我在 form 标签中放了两个 textareas。一个作为第一个框，第二个在最后一个位置但在提交按钮之前。在第一个文本区域上使用 .hidden-xs 和 .hidden-sm 它对于较小的设备是不可见的并且使用 .hidden-md 和 .hidden-lg 我阻止 textarea-tag 在大设备上显示屏幕。

现在一切正常..谢谢

Answer 3

请永远不要为了样式而重复 html 元素，这是不值得的！你破坏了语义，并产生了难以维护的不合逻辑的代码。

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

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

您可以在此处获取代码

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

Bootstrap - 具有固定文本区域高度和列顺序的 2 列表单布局

Bootstrap - 2 column form layout with fixed textarea height and column ordering

html

css

forms

responsive-design

twitter-bootstrap

Bootply link