Bootstrap中NavBar品牌的最佳实践

Bootstrap中NavBar品牌的最佳实践

本文介绍了React-Bootstrap / React-Router-Bootstrap中NavBar品牌的最佳实践的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

React Bootstrap React Router 中有关于锚标签的问题。我很好奇其他人如何处理这种情况。可以只留下带有href(例如< a href =/>网站标题< / a> )的锚定标记,并避免使用 IndexLinkContainer 。还有使用MenuItem,如。

There is an issue regarding anchor tags in React Bootstrap and React Router. I was curious on how other people have handled the situation. It is possible to just leave an anchor tag with an href such as <a href="/">Site Title</a> and avoid using IndexLinkContainer. There is also using MenuItem such as.

<Navbar.Brand>
    <IndexLinkContainer to={{pathname: '/'}}>
          <MenuItem>TitleName</MenuItem>
     </IndexLinkContainer>
 </Navbar.Brand>

然而,这留下了一个荒谬的看法子弹点到导航栏的最左边。

However this leaves a hidious looking bullet point to the far left of the navbar. If anyone else has any ideas on how to tackle this I would appreciate it.

推荐答案

这是我做的(用LinkContainer从反应-router-bootstrap):

That's what I did (with LinkContainer from react-router-bootstrap):

        <LinkContainer to="/" style={{ cursor: 'pointer' }}>
            <Navbar.Brand>
                <span style={{ width: 95 }}>Some text</span>
                <img  src="somesrc" style={{ height:20, float:'right', marginLeft:10 }}/>
            </Navbar.Brand>
        </LinkContainer>

包含网站名称和徽标。
没有项目符号,但我找不到一种方法避免使用LinkContainer ..

Contains site's name and logo.No bullet point but I couldn't find a way to avoid using LinkContainer..

这篇关于React-Bootstrap / React-Router-Bootstrap中NavBar品牌的最佳实践的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-13 05:01