Question

我在bootstrap中设计了一个联系页面表单，我想知道我应该用什么脚手架包装表单以使其可折叠。

我如何以及在何处包装表单元素以使其完全响应？

Full Fiddle Attached

TerminalBalance.update({
    $and: [
        {_id: balanceID},
        {currentBalances:{
            $elemMatch:{ terminalID: response.data.terminalID }
        }}
    ]
},{
    $set: 'currentBalances.$': balance}
}, 
function(err, count) { ... });

感谢！

Answer 1

这取决于您希望表单在不同的屏幕尺寸下看起来像什么。现在，它保持小巧，以大屏幕为中心，并在小屏幕上溢出。如果我假设你主要想让它不会在小屏幕上溢出，那么当它变小时你想要它看起来像什么？

最简单的起点是在#msform元素上将宽度更改为最大宽度：https://jsfiddle.net/1Lbz5shs/1/

（更新：https://jsfiddle.net/1Lbz5shs/2/）

#msform {
  max-width: 400px;
  margin: 50px auto;
  text-align: center;
  position: relative;
}

而不是

#msform {
  width: 400px;
  margin: 50px auto;
  text-align: center;
  position: relative;
}

看起来它需要进行一些其他的调整，很可能是在这样的媒体查询中：

@media (max-width:400px) {
  /* styles for small screens here */ 
  /* stack the 'step indicators' on small screens */
#progressbar li:after {content:none;}
  #progressbar li {
    clear:both;
    float:none;
    margin:20px auto;
  }
}

另外......不能帮助，但提到cursor: none !important; ......我只能说，请不要！没有理由让你的用户猜到他们的鼠标在哪里，而在触摸设备上，无论如何都不是光标......如果你真的想要隐藏它，可能会把它放在某种类型的超时，以便当鼠标静止一两秒时它会消失，并在它再次移动时再次显示它？

Bootstrap表格不是＆＃39;响应/可折叠

1 个答案: