代码之家 › 专栏 › 技术社区 › Jonathan R

React Bootstrap Navitem上没有圆角

react-bootstrap twitter-bootstrap-3 reactjs css javascript

Jonathan R · 技术社区 · 8 年前

我想和那个 pills 风格,但没有圆角

这就是我目前所拥有的

<style type="text/css">{`
.nav-pills > li + li {
    border-radius: 0 !important;
}
`}</style>
<Nav
     bsStyle="pills"
     justified
     activeKey={this.props.currentStep}
     onSelect={this.updateCurrentStep.bind(this)}
>
    <NavItem eventKey={1} title="Template">Template</NavItem>
    <NavItem eventKey={2} title="Edit">Edit</NavItem>
    <NavItem eventKey={3} title="Preview">Preview</NavItem>
</Nav>

如何设置 border-radius 我的 NavItem 到0?它确实出现在 li 但它不会改变任何东西。

2 回复 | 直到 8 年前

Agney Sidharth yadav 8 年前

在样式文件中,可以给出:

.nav-pills>li>a {
    border-radius: 0 !important;
}

它应该将边界半径的样式重置为0。

const Nav = ReactBootstrap.Nav;
const NavItem = ReactBootstrap.NavItem;

class App extends React.Component {
  render() {
    return (
      <Nav
          bsStyle="pills"
          justified
          activeKey={this.props.currentStep}
          onSelect={this.updateCurrentStep}
      >
          <NavItem eventKey={1} title="Template">Template</NavItem>
          <NavItem eventKey={2} title="Edit">Edit</NavItem>
          <NavItem eventKey={3} title="Preview">Preview</NavItem>
      </Nav>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

.nav-pills>li>a {
    border-radius: 0 !important;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.js"></script>

<div id="app"></div>

joknawe 8 年前

在react中有很多不同的(可以说是更好的)处理样式的方法,但是要使用这样的样式块,您需要添加 dangerouslySetInnerHTML={{__html:

<style dangerouslySetInnerHTML={{__html: `
    .nav-pills > li + li { border-radius: 0 !important; }
`}} />

推荐文章

Glyn · 如何使用jQuery更改动态创建的按钮<span>中的文本?

4 年前

Salman Abbas · 如何在导航栏切换中更改下拉菜单中链接的颜色

4 年前

Pavel · 当验证DIV可见时,引导网格会移动

8 年前

Knownow · 通过导航显示背景

8 年前

Mona Coder · 删除Bootstrap 3上下拉菜单和下拉菜单之间的边框

8 年前

user9727963 · 引导和Internet Explorer 11问题

8 年前

Queen of the North · 无法更改输入表单宽度

8 年前

jaggs · 如何将java中创建的href链接传递到jsp页面

8 年前

Abu Ayyub · 引导中具有一个边框的多个输入元素

8 年前

espresso_coffee · 所选内容在我的引导/JQuery应用程序中不起作用?

8 年前