如何将引导程序应用于标题和导航栏？答案

【问题标题】：How apply bootstrap to headers and navbars?如何将引导程序应用于标题和导航栏？
【发布时间】：2017-03-21 15:49:37
【问题描述】：

在下面的代码中创建了一个示例treegrid jqGrid，图像显示了生成的网格：

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css">
    <link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
    <style>

        .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-hdiv {
            background-color: #ffaaaa;
        }
        .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-toppager,
        .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-pager {
            background-color: #ffaaaa;
        }
    </style>

</head>
<body>

<table id="list10"></table>
<div id="pager"></div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<script>
    $.jgrid = $.jgrid || {};
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
</script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>

<script type="text/javascript">
    $(function(){
        var mydata = [
            {id:"1",Name:"Main Menu",MenuId:"1",MenuName:"Menu1",
                level:"0", parent:"", isLeaf:false, expanded:false},
            {id:"1_1",Name:"Sub Menu",MenuId:"1",MenuName:"Menu1",
                level:"1", parent:"1", isLeaf:false, expanded:false},
            {id:"1_1_1",Name:"Sub Sub Menu",MenuId:"1",MenuName:"Menu1",
                level:"2", parent:"1_1", isLeaf:true, expanded:false},
            {id:"1_2",Name:"Sub Menu1",MenuId:"1",MenuName:"Menu1",
                level:"1", parent:"1", isLeaf:true, expanded:false},
            {id:"2",Name:"Main Menu1",MenuId:"2",MenuName:"Menu2",
                level:"0", parent:"", isLeaf:false, expanded:true},
            {id:"2_1",Name:"Main Menu sdaadadadadadaadsdada",MenuId:"2",MenuName:"Menu2",
                level:"1", parent:"2", isLeaf:true, expanded:false},
            {id:"2_2",Name:"Main Menu",MenuId:"2",MenuName:"Menu2",
                level:"1", parent:"2", isLeaf:true, expanded:false},
            {id:"3",Name:"Main Menu2",MenuId:"3",MenuName:"Menu3",
                level:"0", parent:"", isLeaf:false, expanded:false},
            {id:"3_1",Name:"Main Menu",MenuId:"3",MenuName:"Menu3",
                level:"1", parent:"3", isLeaf:true, expanded:false},
            {id:"3_2",Name:"Main Menu",MenuId:"3",MenuName:"Menu3",
                level:"1", parent:"3", isLeaf:true, expanded:false}
        ];

        $("#list10").jqGrid({
            datatype: "local",
            data: mydata,
            colNames:['id','Name','MenuId','Menu Name'],
            colModel:[
                {name:'id',index:'id',width:100,hidden:true},
                {name:'Name',index:'Name',width:150},
                {name:'MenuId',index:'MenuId',width:100},
                {name:'MenuName',index:'MenuName',width:100}
            ],
            cmTemplate: { autoResizable: true, editable: true },
            autoResizing: { compact: true },
            iconSet: "fontAwesome",
            guiStyle: "bootstrap",
            height:'auto',
            pager : "pager",
            sortname: 'id',
            treeGrid: true,
            treeGridModel: 'adjacency',
            treedatatype: "local",
            ExpandColumn: 'Name',
            caption: "Sample Tree View Model"
        });
    })
</script>
</body>
</html>

我想知道做以下事情：

如您所见，叶子 Main Menu sdaadadadadadaadsdada 对于叶子来说确实很长。我如何包装它以使用户可以看到文本而不扩展列，同时文本必须与单选按钮（项目符号）图标保持对齐。
如何更改顶部标题栏的背景和文字颜色？
如何将树节点（箭头）和叶子（项目符号/单选按钮图标）的默认图标图像更改为加/减（对于父节点）图标和暗点（对于叶子）？
当我单击当前显示绿色的行时，如何将其更改为另一种颜色？
当我将鼠标悬停在以灰色突出显示的行上时，我如何也更改此颜色？

【问题讨论】：

请不要写交换问题。请参阅 stackowerflow 的常见问题解答。 stackoverflow 的主要目标是与其他访问者共享信息。因此，帖子应该很好地被索引并按主题分开。结果，最好（对于搜索引擎和其他人）发布 5 个单独的问题，而不是发布一个带有子问题列表的问题。

标签： jqgrid free-jqgrid

【解决方案1】：

尝试添加以下 CSS 规则：

tr.jqgrow > td > .tree-wrap {
    display: table-cell;
}
tr.jqgrow > td > .cell-wrapperleaf,
tr.jqgrow > td > .cell-wrapper {
    display: table-cell;
}
.ui-jqgrid tr.jqgrow > td {
    white-space: normal;
}

得到如下图所示的结果

您可以在.tree-wrap 上另外添加float: left;：

tr.jqgrow > td > .tree-wrap {
    float: left;
    display: table-cell;
}
tr.jqgrow > td > .cell-wrapperleaf,
tr.jqgrow > td > .cell-wrapper {
    display: table-cell;
}
.ui-jqgrid tr.jqgrow > td {
    white-space: normal;
}

更改图标（下方标记为红色）在换行文本一侧的位置：

要更改 jqGrid 元素的颜色，您只需添加相应的 CSS 样式即可。请参阅我为 the answer 创建的演示 https://jsfiddle.net/OlegKi/90qmjean/。

【讨论】：

嗨@Oleg，你能帮我解决这个问题吗？ stackoverflow.com/questions/42093726/…
@MarcusWolf：我现在很忙。明天我飞往苏黎世做一个演讲。我可以在接下来的几天尝试帮助你，但你应该准备演示（例如在 JSFiddle 中），它会重现问题。