组件看起来很糟糕，没有任何填充

Question

我安装了bootstrap 3.3.7和react-bootstrap 0.31.5。我的index.tsx看起来像是：

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Button, ButtonToolbar } from 'react-bootstrap';

ReactDOM.render(
  <div>[...]</div>,
  document.getElementById('root') as HTMLElement
);

[...]代表代码here。

我期望发生的事情：

实际发生的事情：

有什么想法发生了什么？

Answer 1

保证金来自.btn-toolbar>.btn。 你应该做<div className='btn-toolbar'>[...]</div>。如果您决定使用bootstrap，则必须严格遵守其规则。