Question

我正在使用来自react-bootstrap按钮的DropdownButton组件。我使用DropdownButton组件创建了三个按钮，但现在我有两个问题：

button的大小正在根据button的标题发生变化。我希望所有三个按钮的大小相同。
所有三个按钮和垂直位置，按钮之间没有间距。我尝试使用＆＃39; ButtonToolBar＆＃39;组件，它仍然无法正常工作。

以下是我正在使用的代码：

import React, {Component} from 'react'
import {DropdownButton, ButtonToolbar} from 'react-bootstrap'
import {MenuItem} from 'react-bootstrap'

export default class extends Component {
    render() {

      return (
        <div className='panel panel-default panel-borderless'>
              <div className='panel-heading'><h4>Document Types</h4></div>
              <div className='panel-body container-fluid'>
                  <div className='row'>
                      <div className='col-md-12 col-lg-6'>
                          <ButtonToolbar>
                          <DropdownButton title={'Click here'} noCaret block>
                              <MenuItem eventKey='1'>Browse one</MenuItem>
                              <MenuItem eventKey='2'>Browse two</MenuItem>
                          </DropdownButton>
                          </ButtonToolbar>
                      </div>
                  </div>
                  <div className='row'>
                      <div className='col-md-12 col-lg-6'>
                          <ButtonToolbar>
                          <DropdownButton title={'Click here'} noCaret block>
                              <MenuItem eventKey='1'>Browse one</MenuItem>
                              <MenuItem eventKey='2'>Browse two</MenuItem>
                          </DropdownButton>
                          </ButtonToolbar>
                      </div>
                  </div>
                  <div className='row'>
                      <div className='col-md-12 col-lg-6'>
                          <DropdownButton title={'Click here'} noCaret block>
                              <MenuItem eventKey='1'>Browse one</MenuItem>
                              <MenuItem eventKey='2'>Browse two</MenuItem>
                          </DropdownButton>
                      </div>
                  </div>
              </div>
        </div>
        )
    }
}

使用引导程序中DropDownButton时的按钮间距

0 个答案: