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

问题描述

我试图创建过滤器，其布局应该与下面的截图一致。

远远我能够实现类似下面的屏幕截图。

问题是我不能均匀地分布项的空间，如第一张截图所示。也是使用表创建这种布局的好方法？

请帮助我理解和创建此布局。

以下是我的代码

 < div class =panel panel-default> 
< div class =panel-headingstyle =padding：20px;> 
< div class =panel-title pull-left text-label-emphasisizestyle =margin-top：-8px;>< b> Filter< / b>< / div> 
< div class =panel-title pull-right text-labelstyle =margin-top：-8px;>重置< / div> 
< / div> 
< div class =panel-body> 
< table width =100％> 
< tr> 
< td colspan =1> 
< div class =dropdownng-show =！loadingastyle =text-align：left; width =100％> 
< button class =btn btn-custom dropdown-toggletype =buttonstyle =text-align：left; background-color：#fff; border-color：＃C3C3C3;ng-disabled =loading> 
 {{dropDownTitle}} 
< span class =caret>< / span> 
< / button> 
< ul class =dropdown-menu scroll-menu navrole =menu> 
< li ng-repeat =agent in agentListData> 
< a role =menuitemhref =＃ng-click => {{agent}}< / a> 
< / li> 
< / ul> 
< / div> 
< / td> 
< td align =leftcolspan =1> 
< div class =dropdownng-show =！loadingastyle =text-align：left; width =100％> 
< button class =btn btn-custom dropdown-toggletype =buttonstyle =text-align：left; background-color：#fff; border-color：＃C3C3C3;ng-disabled =loading> 
 {{dropDownAllTask​​StatusTitle}} 
< span class =caret>< / span> 
< / buttons> 
< ul class =dropdown-menu scroll-menu navrole =menu> 
< li ng-repeat =taskStaskListData中的任务> 
< a role =menuitemhref =＃ng-click => {{task.title}}< / a> 
< / li> 
< / ul> 
< / div> 
< / td> 
< td align =leftcolspan =1> 
< div ng-show =！loadinga> 
< input id =autoCompletetype =textng-model =selectedtypeahead =task.name for task in taskList | filter：$ viewValue | limitTo：20class = typeahead-on-select =''placeholder =Search Tasks heretypeahead-focus-first =trueng-disabled =loading/> 
< / div> 
< / td> 
< td colspan =1style =padding-right：200px>< / td> 
< / tr> 
< tr ng-show =isAdvancedFilterAvailablestyle =padding：2px> 
< td colspan =4> 
< hr /> 
< / td> 
< / tr> 
< tr ng-show =isAdvancedFilterAvailableclass =fadein fadeout> 
< td align =leftcolspan =1> 
< div style =margin-right：5px; margin-left：5px; margin-top：2pxng-show =！loadinga> 
< input type =checkboxng-model =isCheckedng-click =checkboxClicked（isChecked）ng-disabled =loading/& 
< label for =excludeMinutesStep>排除运行的任务& lt; < / label> 
< input id =excludeMinutesSteptype =numbermin =0max =10ng-disabled =！isChecked || loadingng-model =excludeValueng-change = size =2style =width：40px/> < b>分钟< / b> 
< / div> 
< / td> 
< td align =leftcolspan =1> 
< div style =margin-right：5px; margin-top：2pxng-show =！loadinga> 
< input id =datalabelstype =checkboxng-model =isLabelShowCheckedng-click =ng-disabled =loading/> 
< label for =datalabels>显示标签< / label> 
< / div> 
< / td> 
< td colspan =1style =padding-right：200px>< / td> 
< td colspan =1style =padding-right：200px>< / td> 
< / tr> 
< tr style =padding：2px> 
< td colspan =4> 
< hr /> 
< / td> 
< / tr> 
< tr> 
< td colspan =4> 
< a ng-show =！isAdvancedFilterAvailableng-click =isAdvancedFilterAvailable = true>显示高级过滤器< / a> 
< a ng-show =isAdvancedFilterAvailableng-click =isAdvancedFilterAvailable = false>隐藏高级过滤器< / a> 
< / td> 
< / tr> 
< / table> 
< / div> 
< / div> 
  

css

  .text-label {
 color：＃aab2bd; 
 font：8pt; 
} 
 .text-label-emphasisize {
 color：＃575F64; 
} 
  

解决方案

Bootstrap使所有的样式元素成为类，使用它们。就像这样，请阅读文档，当它卡住它真正可以帮助你。

除此之外，让你陷入困境。
如果你真的需要在面板中使用 table ，那么最佳做法是将它放置在 .panel-body 之下或之前，但是因为我们希望为我们的未来保持灵敏的移动第一技术项目，尽量避免它，除非你实际上想要一个表的数据。 嵌套列是维护此列的最佳做法。

如何嵌套任何列的示例是使用 .row ，后跟要嵌套的列大小，如下例所示。

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

这将创建良好的断点并允许为您的应用程序维护良好的UI / UX。 p>

理解bootstrap的重要性不是提供所有的答案，但它是一个很好的样式框架来扩展，所以我们重写css更改。

我添加了一些css覆盖，使边框变成方形，并尝试
维护您的angular.js（您可能需要查看）

完成代码，预览托管在 bootply

对于样式复选框，请查看 Awesome Bootstrap复选框，他们的完整文档可以在他们的github。

编辑 ） -
要使下拉菜单与按钮的宽度匹配，请在重写的样式表中添加以下css代码。

  .open> .dropdown-menu {
 min-width：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屋！