引导导航栏 JSF <h：commandLink>样式不起作用

Question

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

但现在的问题:<h:commandLink>只能用于<h:form>，所以一切都将被渲染到<form>，因为这所有我的CSS从引导不再工作。

在我的例子中，<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 */
}

也有更简单的方法:通过<h:form>将.navbar类与div包装。选择器的问题也就解决了。

       <!-- 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>