Bootstrap 有大量的时间致力于将所有“风格元素”制作成类,并使用它们。尽管很直白,但请阅读文档 http://getbootstrap.com/当遇到困难时,它确实可以帮助你。
除此之外,让我们陷入你的问题。
如果你确实需要使用table
然后在你的面板中,最佳实践 http://getbootstrap.com/components/#panels-tables就是把它放在下面或前面.panel-body
但由于我们希望为所有未来的项目维护响应式移动优先技术,因此请尽量避免使用它,除非您确实想要一个数据表。嵌套列 http://getbootstrap.com/css/#grid-nesting是维持这一点的最佳实践。
如何嵌套任何列的一个示例是使用.row
接下来是您想要嵌套的列大小,如下所示。
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"></div>
</div>
这将创建良好的断点,并允许您为应用程序维护良好的 UI/UX。
重要的是要了解 bootstrap 并不能提供所有答案,但它是一个很好的扩展样式框架,因此我们进行了覆盖 css 的更改。
我添加了一些 css 覆盖以使边框成为方形,并尝试
维护你的 angular.js (你可能需要检查一下)
已完成的代码,预览托管于bootply http://www.bootply.com/BDzD0V3OsH
对于样式复选框,请查看很棒的 Bootstrap 复选框 https://github.com/flatlogic/awesome-bootstrap-checkbox,他们的完整文档可以在他们的 github 上找到。
Edit(全宽下拉菜单)--
要使下拉菜单与按钮的宽度匹配,请将以下 css 代码添加到您的重写样式表中。
.open>.dropdown-menu {
min-width: 100%;
}
希望我有帮助;)