html – Twitter Bootstrap – 两列布局

前端之家收集整理的这篇文章主要介绍了html – Twitter Bootstrap – 两列布局前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在Bootstrap 2.3中,是否有一种标准化的方法可以为 HTML< form>提供双列布局.标签/输入/动作?我在文档中没有看到任何内容.

我想要的示例图像:http://i.imgur.com/3o6IoN4.png

另外,我需要有一个坚实的背景颜色,跨越div.span12或其他封闭容器的整个宽度.有两个.span6导致中心的背景颜色中断(我想可以通过将两个.span6包装在div.clearfix并应用了背景类来修复它?

解决方法

简单的东西.将引导行放在父div中,并将该div的背景设置为您选择的颜色.

标记

  1. <div id="background-color">
  2. <form id="form1" name="form1" method="post" action=""><!-- START THE FORM -->
  3. <div class="row-fluid">
  4.  
  5. <div class="span6"> <!-- FIRST COLUMN -->
  6. <label>First Name</label>
  7. <label for="textfield"></label>
  8. <input type="text" />
  9. <label>Last Name</label>
  10. <label for="textfield"></label>
  11. <input type="text" />
  12. </div>
  13.  
  14. <div class="span6"> <!-- SECOND COLUMN -->
  15. <label>Other</label>
  16. <label for="textfield"></label>
  17. <input type="text" />
  18. <label>Fields</label>
  19. <label for="textfield"></label>
  20. <input type="text" />
  21.  
  22. <input type="submit" name="button" id="button" value="Submit" />
  23. </form> <!-- END THE FORM -->
  24. </div>
  25. </form>
  26.  
  27. </div> <!-- End row -->
  28.  
  29. </div> <!-- END BACKGROUND -->

CSS:

  1. #background-color {background-color: #CCC;}

我希望这有帮助

猜你在找的HTML相关文章