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

标签 html css forms twitter-bootstrap responsive-design

我正在尝试在 Bootstrap 中构建一个 2 列表单布局,右侧有一个固定高度的文本区域。我让它在桌面屏幕上运行良好,文本区域框上有一个 .pull-right-md (自己的类)。但在“响应式”模式下(在较小的屏幕上),我遇到了框顺序的问题。我希望文本区域在小屏幕上显示时位于最后一个位置。我已经尝试通过使用 .col-*-pull.col-* 订购 col 来解决这个问题-push 类,但它不起作用。

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

您有什么想法可以解决这个问题吗?

最佳答案

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

无需重复任何内容即可轻松实现所需效果:

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

您可以在此处获取代码

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

关于html - Bootstrap - 具有固定文本区域高度和列顺序的 2 列表单布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30396743/

相关文章:

javascript - 使用 javascript 将产品数据从 Firestore 加载到网页

html - iPad 的 Safari 在将 jpg 渲染为背景图像时有问题吗?

forms - Symfony2 表单生成器实体类型选定值

php - Symfony2 带有复选框表单的扩展表

javascript - 嵌套 jQuery radio 输入

html - 图像 Sprite 正确的间距

javascript - 使用折叠菜单

html - Bootstrap - 导航栏不会在移动设备上关闭

javascript - 如何在 Angular Material 的$mdToast中一起使用自定义主题和模板

javascript - 高亮显示 div onclick