I have a form and it breaks when placed inside a Bootstrap Jumbotron.
我有一个表格,当它被放置在Bootstrap Jumbotron中时会中断。
What needs to be done for this to work ok?
需要做些什么才能正常工作?
Code
<div class="container">
<div class="col-sm-6 col-sm-offset-3 well well-sm">
<h3><i class="fa fa-rocket"></i> Quick Connect</h3>
<form class="form" role="form" action="chat" method="post">
<fieldset>
<div class="input-group">
<input name="nickname" type="text" placeholder="Enter a nickname, be creative!" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Enter Chat</button>
</span>
</div>
</fieldset>
</form>
</div>
</div>
Outside Jumbotron
Inside Jumbotron
Thanks
Steve
Edit: Can someone also provide an example of how to fix this?
编辑:有人也可以提供一个如何解决这个问题的例子吗?
2 个解决方案
#1
1
This is because jumbotron overrides btn-default to scale it up. You can try changing it to btn-small and see if that gives the desired result. If not you can just define a new css class and copy the normal style.
这是因为jumbotron会覆盖btn-default来扩展它。您可以尝试将其更改为btn-small并查看是否可以获得所需的结果。如果没有,您可以只定义一个新的css类并复制正常样式。
#2
0
Try input-group-addon? This is just off the cuff and I will do little more digging to see because I'm interested in doing a quick connect inside a jumbotron.
尝试输入group-addon?这只是袖手旁观,我会做更多的挖掘,因为我有兴趣在一个超大屏幕内进行快速连接。
#1
1
This is because jumbotron overrides btn-default to scale it up. You can try changing it to btn-small and see if that gives the desired result. If not you can just define a new css class and copy the normal style.
这是因为jumbotron会覆盖btn-default来扩展它。您可以尝试将其更改为btn-small并查看是否可以获得所需的结果。如果没有,您可以只定义一个新的css类并复制正常样式。
#2
0
Try input-group-addon? This is just off the cuff and I will do little more digging to see because I'm interested in doing a quick connect inside a jumbotron.
尝试输入group-addon?这只是袖手旁观,我会做更多的挖掘,因为我有兴趣在一个超大屏幕内进行快速连接。