Question

我正在使用Bootstrap的导航栏主题。导航栏使用<a>导航到其他页面。但我想通过操作导航，以便我可以在faces-config.xml中管理我的视图。导航已经与<h:commandLink>

一起使用

但现在问题：<h:commandLink>只能用于<h:form>所以所有内容都会被渲染到<form>，因此我的所有CSS都不再起作用了。< / p>

在我的示例中，<a>由CSS设置样式，而<h:commandLink>未设置样式且位置不正确。

        <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span> <span
                        class="icon-bar"></span> <span class="icon-bar"></span> <span
                        class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/WebEng_P07/faces/Home.xhtml">MyFacebook</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/WebEng_P07/faces/Home.xhtml">Home</a></li>
                    <li><a href="/WebEng_P07/faces/Posts.xhtml">Posts</a></li>
                    <li><a href="/WebEng_P07/faces/Login.xhtml">Login</a></li>
                    <li><a href="/WebEng_P07/faces/Register.xhtml">Registrierung</a></li>
                    <li> 
                        <h:form![enter image description here][1]>
                            <h:commandLink value="Logout" action="#{loginBean.logout}" rendered="#{loginBean.loggedIn}"></h:commandLink>
                        </h:form> 
                    </li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>

Answer 1

Bootstrap风格不起作用的问题在于Bootstrap在导航栏中使用了以下选择器，例如<a/>。

.navbar-default .navbar-nav>li>a {
    color: #777;
    /* other styles */
}

为了使它工作，您应该创建custom.css并覆盖bootstrap的css，如下所示：

.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>form>a, {
    color: #777;
   /* other styles */
}

还有一种更简单的方法：将div与.navbar的{{1}}包裹在<h:form>之后。选择器的问题将得到解决。

       <!-- Fixed navbar -->
<h:form>
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span> <span
                        class="icon-bar"></span> <span class="icon-bar"></span> <span
                        class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/WebEng_P07/faces/Home.xhtml">MyFacebook</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/WebEng_P07/faces/Home.xhtml">Home</a></li>
                    <li><a href="/WebEng_P07/faces/Posts.xhtml">Posts</a></li>
                    <li><a href="/WebEng_P07/faces/Login.xhtml">Login</a></li>
                    <li><a href="/WebEng_P07/faces/Register.xhtml">Registrierung</a></li>
                    <li> 
                        <h:commandLink value="Logout" action="#{loginBean.logout}"   rendered="#   {loginBean.loggedIn}">
                        </h:commandLink>    
                    </li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
</h:form>

Bootstrap navbar JSF <h：commandlink>样式不起作用</h：commandlink>

1 个答案: