How separate stuck input box and submit button from each other in Twitter Bootstrap?

In a funny kind of way, the submit button sticks to the input box. I couldn’t understand the reason. I can solve it by giving -(minus) margin etc. However, I’m looking for permanent solution. I’ve attached the screenshot from chrome’s debug tool.

I want to align the button to the left below the select box.

If you have difficulties to see the image…

http://i.stack.imgur.com/VhJVb.png

                        
                        
                            07:00 AM
                            07:30 AM
                            08:00 AM
                            08:30 AM
                            09:00  AM
                            09:30 AM
                            10:00 AM
                            10:30 AM
                            11:000 AM
                            11:30 AM
                            12:00 PM
                            12:30 PM
                            01:00 PM
                            01:30 PM
                            02:00 PM
                            02:30 PM
                            03:00 PM
                            03:30 PM
                            04:00 PM
                            04:30 PM
                            05:00 PM
                            05:30 PM
                            06:00 PM
                            06:30 PM
                        


                        

Problem courtesy of: SNaRe

Solution

You can separate the input fields from your input button into two rows using the .control-group class from the bootstrap. That class adds some margin to the bottom of the div that should unstick your button from your input fields:

Demo: http://jsfiddle.net/MYjzj/

HTML

07:00 AM 07:30 AM 08:00 AM 08:30 AM 09:00 AM 09:30 AM 10:00 AM 10:30 AM 11:000 AM 11:30 AM 12:00 PM 12:30 PM 01:00 PM 01:30 PM 02:00 PM 02:30 PM 03:00 PM 03:30 PM 04:00 PM 04:30 PM 05:00 PM 05:30 PM 06:00 PM 06:30 PM

Solution courtesy of: Andres Ilich

责编内容来自:CSS3 Recipes (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » How separate stuck input box and submit button from each other in Twitter Bootstrap?

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录