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

Question

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

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

我希望在一行中看到 topnav。

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 主题，我去了主题/BootstrapTheme/Resources/public/css/style.css 并将上面的代码添加到 style.css。在测试之前不要忘记删除 /var/cache（prod 或 dev）中的缓存文件夹。

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

Answer 2

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

谢谢大家。