如何在网格布局中将引导下拉菜单和其他下拉菜单对齐?

2024-01-05

I am trying to create filters whose layout should match something like below screenshot. enter image description here

So far I am able to achieve something like the given below screenshot. enter image description here

问题是我无法在空间上均匀分布项目,如第一个屏幕截图所示。使用表格创建这种布局也是好方法吗?

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

下面是我的代码

<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 有大量的时间致力于将所有“风格元素”制作成类,并使用它们。尽管很直白,但请阅读文档 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%;
}

希望我有帮助;)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在网格布局中将引导下拉菜单和其他下拉菜单对齐? 的相关文章

  • Internet Explorer 9 中图像地图周围的蓝色边框

    我遇到了以下问题 我在网站上使用图像地图 在 Internet Explorer 9 IE8 很好 中 当我单击链接 区域标签 时 它周围会出现蓝色边框 如何摆脱它 我试过了 map map area border none importa
  • 如何修改primeng p日历样式?

    我正在尝试修改 primeng p calendar 但它无法正常工作 例如 我希望它是这样的 需要的改变 https i stack imgur com QBXoh png 但原来它看起来像这样 原始图像 https i stack im
  • Bootstrap 手风琴菜单不起作用

    我设计了一个如图所示的手风琴菜单 如果单击菜单 打开的菜单将关闭 这就是手风琴的功能 但在这个设计中 我逐个单击菜单 但前一个没有关闭 如何解决这个问题 提前致谢 jQuery document ready function var acc
  • 无法删除重叠的框阴影

    更具体地说 我使用的是聚合物纸影 我正在尝试删除一个的两侧paper shadowbox 来创建一个简单的箭头框 但我似乎无法摆脱它 我试过删除position absolute 但这似乎并没有消除重叠的行为 这是我的 html css 的
  • HTML5旋转动画——如何显示“硬币的另一面”?

    考虑到这个 JSFiddle 旋转示例 https jsfiddle net 194288aw HTML div class container div class coin div class face heads Hey div div
  • 如何更改 Material UI 版本 5 自动完成中的选项字体大小?

    我想更改下拉项目的字体大小 我尝试了不同的方法来改变字体大小 如下所示 如何更改 Material UI 自动完成字体大小 https stackoverflow com questions 62492939 how do i change
  • a:active 不起作用

    我在这里很困惑 the a active不工作 但是 hover工作正常 我已经尝试了很多事情 但这个让我陷入困境 而且真的很令人困惑 我刚刚在表中添加了链接 我已将单元格添加到了类中 menu1 现在 当我访问活动页面时 活动链接不会突出
  • 为什么inline-block元素出现在inline元素的下方?如何让它们出现在同一行?

    我目前正在尝试理解基本的 HTML 和 CSS 概念 并遇到了一个非常奇怪的问题 我有两个元素 一个具有 display inline 另一个具有 display inline block 我正在尝试创建一个列表 类似的东西1 SOME C
  • 有 CSS 的替代品吗?

    是否有替代 CSS 的样式表格式化语言 或者 CSS 是当前用于执行样式表格式化类型操作的单一语言 我查看了维基百科上 CSS 的描述 http en wikipedia org wiki Cascading Style Sheets ht
  • 如何隐藏其他选项卡的内容并仅显示所选选项卡的内容

    当我单击特定选项卡时 其他选项卡的内容应该隐藏 但它并没有隐藏 这是我所有的代码 function showStuff id if document getElementById id style display block documen
  • Angularjs 手表服务对象

    为什么我无法观看服务中的对象 我有一个简单的变量可以工作 但是一个对象不能工作 http plnkr co edit S4b2g3baS7dwQt3t8XEK p preview http plnkr co edit S4b2g3baS7d
  • @Font-face 不适用于 IOS

    我正在开发一个 WordPress 网站 并且在每个页面上都有一个 H1 标签作为该页面的标题 我正在使用 font face 的特殊字体 它在每个浏览器的 Windows 上都运行良好 但是当我切换到 Mac 时 它不会显示 h1 标签
  • Angular.js:未捕获的错误,没有模块:myapp

    我也在尝试引导 angular js 项目 这是我的index html div p Loading p div
  • 如何观察包含许多 sass 文件的整个目录/文件夹的变化

    我如何跟踪包含许多 sass 文件的整个目录的更改 我正在使用以下命令来观察 sass 的变化 file sass watch style scss style css 但是如何观察包含许多 sass 文件的整个目录 文件夹的变化 只需使用
  • 有 CSS 父选择器吗?

    我该如何选择 li 元素是锚元素的直接父元素 举个例子 我的 CSS 应该是这样的 li lt a active property value 显然 有多种方法可以使用 JavaScript 实现此目的 但我希望 CSS Level 2 本
  • 导航栏折叠在 Bootstrap 中不起作用

    Bhanu pratap 解决了这个问题 在这个问题的末尾检查一下 我一直在遵循旧的路线来构建导航栏折叠 三明治 问题是课程中的页面顶部似乎有一个黑条 并且缩小页面时会出现导航栏 对我来说 我只需在左侧找到一个按钮 另外 当我缩小页面时 我
  • div Hello div div Howdy dere pardner div div div 我明白它的作用 但为什么叫这个名字both 什么是both mean 两者的意思是 一组两件事中的每一项 左 和 右 两件事
  • 如何在angularjs中使用addClass方法

    我有一个仅限于类的 angularjs 指令 如何使用 angularjs 中的 addClass 方法添加它 指示 app directive number function return restrict C link function
  • 将 Div 放置在另一个 DIV 下方

    我有两个 DIV 元素 其中之一具有绝对位置 主 DIV 的左下角 第二个 DIV 是隐藏的 只有单击链接才能显示 我需要第二个出现在第一个下方 但由于第一个 div 的位置是绝对的 第二个 div 出现在第一个 div 之上 HTML 代
  • 为什么我的图像下方有空间? [复制]

    这个问题在这里已经有答案了 图像在下面获得了神秘的空白空间 即使padding 0 margin 0被应用 示范 http jsfiddle net cLETP 红色边框应该包围图像 但底部有空间 造成这种情况的原因是什么 如何删除该空间

随机推荐