Zikula 在 Bootstrap 主题中将块添加到顶部导航位置

Question

当我在 Bootstrap 主题中将搜索块添加到顶部导航时，登录按钮是 "broken"

ZK2.0.13 Bootstrap 主题。添加块后，用户登录出现在新行中（示例）

我希望在一行中看到顶部导航。

Answer 1

我为您找到了答案。我所做的是按照您的方式设置页面，然后在 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 主题，我去了 themes/BootstrapTheme/Resources/public/css/style.css 并将上面的代码添加到 style.css。在测试之前，不要忘记删除 /var/cache（prod 或 dev）中的缓存文件夹。

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

Answer 2

谢谢帕斯蒂安。它的工作。我编辑了文件：Resources\ZikulaSearchModule\views\Block\search.html.twig 以便将 css class 更改为 "myInput-group"。然后我编辑了 Resources/public/css/style.css 并将您的更改添加到文件中。

谢谢大家。

Zikula 在 Bootstrap 主题中将块添加到顶部导航位置

Zikula add block to topnav position in Bootstrap Theme

zikula

twitter-bootstrap-3