如何使引导下拉等人一起在一个网格布局？ [英] How to align bootstrap dropdown and others together in a grid layout?

问题描述

我试图创建过滤器，其布局应符合类似下面的截图。

到目前为止，我能够实现类似下面的截图给定的。

问题是我无法所示第一屏幕截图在空间上均匀分布的项目。也就是它很好的方法来创建这种布局使用表？

请帮我的理解和创造这种布局。

下面是我的code

 ＆LT; D​​IV CLASS =面板面板默认＆GT;
    ＆LT; D​​IV CLASS =面板标题的风格=填充：20像素;＆GT;
        ＆LT; D​​IV CLASS =面板标题拉左文本标签强调风格=的margin-top：-8px;＆GT;＆LT; B＆GT;过滤和LT; / B＆GT;＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =面板标题拉右边的文本标签的风格=的margin-top：-8px;＆GT;复位＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =面板体＆GT;
        ＆LT;表格的宽度=100％＆GT;
            ＆所述; TR＆GT;
                ＆所述; TD列跨度=1＆GT;
                    ＆LT; D​​IV CLASS =下拉菜单NG秀=风格=loadinga！文本对齐：左; WIDTH =100％＆GT;
                        ＆LT;按钮类=BTN BTN定制下拉曲肘式=button风格=文本对齐：左;背景色：#FFF;边框颜色：＃C3C3C3;NG残疾=加载 ＆GT;
                            {{dropDownTitle}}
                            ＆LT;跨度类=插入符号＆GT;＆LT; / SPAN＆GT;
                        ＆LT; /按钮＆GT;
                        ＆LT; UL类=下拉菜单中的滚动菜单导航角色=菜单＆GT;
                            ＆LT;李NG重复=代理agentListData＆GT;
                                ＆下;一个角色=菜单项的href =＃纳克点击=＆GT; {{剂}}＆下; / A＆GT;
                            ＆LT; /李＆GT;
                        ＆LT; / UL＆GT;
                    ＆LT; / DIV＆GT;
                ＆LT; / TD＆GT;
                ＆所述; TD对齐=左列跨度=1＆GT;
                    ＆LT; D​​IV CLASS =下拉菜单NG秀=风格=loadinga！文本对齐：左; WIDTH =100％＆GT;
                        ＆LT;按钮类=BTN BTN定制下拉曲肘式=button风格=文本对齐：左;背景色：#FFF;边框颜色：＃C3C3C3;NG残疾=加载 ＆GT;
                            {{dropDownAllTask​​StatusTitle}}
                            ＆LT;跨度类=插入符号＆GT;＆LT; / SPAN＆GT;
                        ＆LT; /按钮＆GT;
                        ＆LT; UL类=下拉菜单中的滚动菜单导航角色=菜单＆GT;
                            ＆LT;李NG重复=任务taskStatusListData＆GT;
                                ＆下;一个角色=菜单项的href =＃纳克点击=＆GT; {{task.title}}＆下; / A＆GT;
                            ＆LT; /李＆GT;
                        ＆LT; / UL＆GT;
                    ＆LT; / DIV＆GT;
                ＆LT; / TD＆GT;
                ＆所述; TD对齐=左列跨度=1＆GT;
                    ＆LT; D​​IV NG-秀= GTloadinga！;
                        ＆LT;输入ID =自动完成类型=文本NG模型=选择预输入=task.name在任务列表中的任务|过滤器：$ viewValue | limitTo：20级=表格控预输入上 - 选择=''占位=​​这里搜索任务预输入焦点一=真正的NG-禁用=装载/＆GT;
                    ＆LT; / DIV＆GT;
                ＆LT; / TD＆GT;
                ＆LT; TD合并单元格=1的风格=填充右：200像素＆GT;＆LT; / TD＆GT;
            ＆LT; / TR＆GT;
            ＆LT; TR NG秀=isAdvancedFilterAvailable的风格=填充：2px的＆GT;
                ＆所述; TD列跨度=4＆GT;
                    ＆LT;小时/＆GT;
                ＆LT; / TD＆GT;
            ＆LT; / TR＆GT;
            ＆LT; TR NG秀=isAdvancedFilterAvailable级=淡入淡出＆GT;
                ＆所述; TD对齐=左列跨度=1＆GT;
                    ＆LT; D​​IV的风格=保证金右：5像素;保证金左：为5px;的margin-top：2px的NG秀​​= gt;中loadinga！
                        ＆LT;输入类型=复选框NG模型=器isCheckedNG点击=checkboxClicked（器isChecked）NG残疾=装载/＆GT;
                        ＆LT;标签=excludeMinutesStep＆GT;排除任务运行和放大器; LT; ＆LT; /标签＆gt;
                        ＆LT;！器isChecked ||加载输入ID =excludeMinutesStepTYPE =号码最小=0最大=10NG-禁用= NG-模式=excludeValueNG变化=大小= 2的风格=宽度：40像素/＆GT; ＆LT; B＆GT;＆分钟LT; / B＆GT;
                    ＆LT; / DIV＆GT;
                ＆LT; / TD＆GT;
                ＆所述; TD对齐=左列跨度=1＆GT;
                    ＆LT; D​​IV的风格=保证金右：为5px;的margin-top：2px的NG秀​​=loadinga！＆GT;
                        ＆LT;输入ID =datalabels类型=复选框NG模型=isLabelShowCheckedNG点击=NG-禁用=装载/＆GT;
                        ＆LT;标签=datalabels＆gt;显示标签和LT; /标签＆gt;
                    ＆LT; / DIV＆GT;
                ＆LT; / TD＆GT;
                ＆LT; TD合并单元格=1的风格=填充右：200像素＆GT;＆LT; / TD＆GT;
                ＆LT; TD合并单元格=1的风格=填充右：200像素＆GT;＆LT; / TD＆GT;
            ＆LT; / TR＆GT;
            ＆LT; TR风格=填充：2px的＆GT;
                ＆所述; TD列跨度=4＆GT;
                    ＆LT;小时/＆GT;
                ＆LT; / TD＆GT;
            ＆LT; / TR＆GT;
            ＆所述; TR＆GT;
                ＆所述; TD列跨度=4＆GT;
                    ＆LT;！isAdvancedFilterAvailable一NG秀= NG点击=isAdvancedFilterAvailable =真正的＆gt;显示高级过滤器和LT; / A＆GT;
                    ＆LT;一个NG秀=isAdvancedFilterAvailableNG点击=isAdvancedFilterAvailable =假＆GT;隐藏高级过滤器＆LT; / A＆GT;
                ＆LT; / TD＆GT;
            ＆LT; / TR＆GT;
        ＆LT; /表＆gt;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

CSS

 的.text标签{
    颜色：＃aab2bd;
    字体：8PT;
}
的.text标签强调{
    颜色：＃575F64;
}
 

解决方案

引导必须致力于使所有的样式元素成类万吨周，使用它们。钝一如即，当卡才真正可以帮助你阅读文档。

除此之外，让卡住了您的问题。
如果你真的需要使用表在面板以后，的最佳实践是将它放在低于或 .panel身前但是因为我们要保持灵活的移动首创的技术为我们所有未来的项目，尝试避免它，除非你真正想要的数据表。 嵌套列是最好的做法，以保持这一点。

如何鸟巢任何列是使用一个例子 .row 其次要窝列的大小，下面的例子。

 ＆LT; D​​IV CLASS =行＆GT;
＆LT; D​​IV CLASS =COL-XS-12 COL-SM-6 COL-MD-4 COL-LG-4＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

这将创造良好的断点，让你保持良好的UI / UX为您的应用程序。

其重要的是了解自举并没有提供所有的答案，但它是一个很好的风格框架，从扩张，所以我们做覆盖的CSS的变化。

  

我增加了一些CSS覆盖，使边境广场，并试图
  保持你的angular.js（您可能需要审查）

完成code。与托管 bootply

preVIEW

有关样式复选框，看看真棒引导复选框的，完整的文档通过他们可以用自己的github上。

修改（全宽下拉菜单） -
为了有下拉菜单匹配按钮的宽度以下CSS code添加到您的覆盖样式表。

 。开＆GT; .dropdown菜单{
      最小宽度：100％;
}
 

希望我帮助;）

I am trying to create filters whose layout should match something like below screenshot.

So far I am able to achieve something like the given below screenshot.

Problem is I am unable to evenly distribute items in terms of space as shown in 1st screenshot. Also is it good way to create this kind of layout using table?

Please help me in understanding and creating this layout.

Below is my code

<div class="panel panel-default">
    <div class="panel-heading" style="padding: 20px;">
        <div class="panel-title pull-left text-label-emphasize" style="margin-top: -8px;"><b>Filter</b></div>
        <div class="panel-title pull-right text-label" style="margin-top: -8px;">Reset</div>
    </div>
    <div class="panel-body">
        <table width="100%">
            <tr>
                <td colspan="1">
                    <div class="dropdown" ng-show="!loadinga" style="text-align: left;" width="100%">
                        <button class="btn btn-custom dropdown-toggle" type="button" style="text-align: left; background-color: #fff; border-color: #C3C3C3; " ng-disabled="loading">
                            {{dropDownTitle}}
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu scroll-menu nav" role="menu">
                            <li ng-repeat="agent in agentListData">
                                <a role="menuitem" href="#" ng-click="">{{agent}}</a>
                            </li>
                        </ul>
                    </div>
                </td>
                <td align="left" colspan="1">
                    <div class="dropdown" ng-show="!loadinga" style="text-align: left;" width="100%">
                        <button class="btn btn-custom dropdown-toggle" type="button" style="text-align: left; background-color: #fff; border-color: #C3C3C3; " ng-disabled="loading">
                            {{dropDownAllTaskStatusTitle}}
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu scroll-menu nav" role="menu">
                            <li ng-repeat="task in taskStatusListData">
                                <a role="menuitem" href="#" ng-click="">{{task.title}}</a>
                            </li>
                        </ul>
                    </div>
                </td>
                <td align="left" colspan="1">
                    <div ng-show="!loadinga">
                        <input id="autoComplete" type="text" ng-model="selected" typeahead="task.name for task in taskList | filter:$viewValue | limitTo:20" class="form-control" typeahead-on-select='' placeholder="Search Tasks here" typeahead-focus-first="true" ng-disabled="loading" />
                    </div>
                </td>
                <td colspan="1" style="padding-right: 200px"></td>
            </tr>
            <tr ng-show="isAdvancedFilterAvailable" style="padding:2px">
                <td colspan="4">
                    <hr/>
                </td>
            </tr>
            <tr ng-show="isAdvancedFilterAvailable" class="fadein fadeout">
                <td align="left" colspan="1">
                    <div style="margin-right: 5px;margin-left: 5px; margin-top:2px" ng-show="!loadinga">
                        <input type="checkbox" ng-model="isChecked" ng-click="checkboxClicked(isChecked)" ng-disabled="loading" />
                        <label for="excludeMinutesStep">Exclude tasks running &lt; </label>
                        <input id="excludeMinutesStep" type="number" min="0" max="10" ng-disabled="!isChecked || loading" ng-model="excludeValue" ng-change="" size="2" style="width:40px" /> <b>minutes</b>
                    </div>
                </td>
                <td align="left" colspan="1">
                    <div style="margin-right: 5px; margin-top:2px" ng-show="!loadinga">
                        <input id="datalabels" type="checkbox" ng-model="isLabelShowChecked" ng-click="" ng-disabled="loading" />
                        <label for="datalabels">Show Labels</label>
                    </div>
                </td>
                <td colspan="1" style="padding-right: 200px"></td>
                <td colspan="1" style="padding-right: 200px"></td>
            </tr>
            <tr style="padding:2px">
                <td colspan="4">
                    <hr/>
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <a ng-show="!isAdvancedFilterAvailable" ng-click="isAdvancedFilterAvailable=true">Show Advanced Filters</a>
                    <a ng-show="isAdvancedFilterAvailable" ng-click="isAdvancedFilterAvailable=false">Hide Advanced Filters</a>
                </td>
            </tr>
        </table>
    </div>
</div>

css

.text-label {
    color: #aab2bd;
    font: 8pt;
}
.text-label-emphasize {
    color: #575F64;
}

解决方案

Bootstrap have tons of weeks dedicated to making all the "style elements" into classes, use them. As blunt as that is, read the documentation when stuck it truly can help you.

Apart from that lets get stuck into your issue. If you really need to use table in your panel then, the best practice is to place it below or before .panel-body but since we want to maintain responsive mobile first technology for all our future projects, try to avoid it unless you actually want a table for data. Nested columns are the best practice to maintain this.

An example of how to nest any column is to use .row followed by the column size you wish to nest, example below.

<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"></div>
</div>

This would create good breakpoints and allow you to maintain a good UI/UX for your application.

Its important to understand bootstrap doesn't provide all the answers but it's a good style framework to expand from, so we make overriding css changes.

I added a few css overrides to make the borders square, and tried to maintain your angular.js (you may need to review that)

Completed code with preview hosted on bootply

For the style checkboxes, take a look at Awesome Bootstrap Checkboxes, full documentation by them is available on their github.

Edit (Full width dropdown menu) -- To have the dropdown menu match the width of the button add the following css code to your overriding stylesheet.

.open>.dropdown-menu {
      min-width: 100%;
}

Hope I helped ;)

这篇关于如何使引导下拉等人一起在一个网格布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！