0

当我将搜索块添加到 Bootstrap 主题中的顶部导航时,登录按钮“损坏”

带有 Bootstrap 主题的 ZK2.0.13。添加块时,用户登录出现在新行中(示例)一条新线

我希望在一行中看到 topnav。

4

2 回答 2

2

我为你找到了答案。我所做的是按照您的方式设置页面,然后在 Chrome 中查看它。该应用程序有一些非常好的开发工具用于试验 css。选择 View->Developer->Developer Tools(Mac 上的 Cmd-Option-I)。从那里右键单击搜索框并选择检查。然后,您可以在右侧面板上查看所有影响您元素的 css,并查看 html 的布局方式。我注意到搜索框被包裹在一个带有输入组样式的 div 中,所以这就是我想要弄乱的那个。我发现如果我添加了以下代码,它可以满足您的要求:

.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
    float: right !important;
    width: 200px;
    padding-top: 6px;
}

最后三个 css 命令是产生差异的更改。为了修复 Bootstrap 主题,我去了主题/BootstrapTheme/Resources/public/css/style.css 并将上面的代码添加到 style.css。在测试之前不要忘记删除 /var/cache(prod 或 dev)中的缓存文件夹。

我对此解决方案的一个担忧是 .input-group 可能会在其他地方使用,这可能会干扰。快速检查并没有显示它在除搜索框之外的其他任何地方使用。如果它在其他地方,您将不得不创建自己的主题(不难)并手动编写一些代码。

于 2019-07-27T16:07:13.067 回答
0

谢谢帕斯蒂安。它正在工作。我已经编辑了文件:Resources\ZikulaSearchModule\views\Block\search.html.twig为了将 css 类更改为“myInput-group”。然后我已经编辑Resources/public/css/style.css并将您的更改添加到文件中。

谢谢大家。

于 2019-07-29T07:18:00.300 回答