Блог

Главная - Вопросы по программированию - Реагируйте На Панель Кнопок Начальной Загрузки, Не Разделяя Кнопки

Реагируйте На Панель Кнопок Начальной Загрузки, Не Разделяя Кнопки

#javascript #css #reactjs #twitter-bootstrap #react-bootstrap

Вопрос:

У меня возникла проблема с разделением двух кнопок с помощью ButtonToolbar компонента react-bootstrap . Я бы хотел, чтобы эти две кнопки были расположены на расстоянии друг от друга, но я не уверен, что мне нужно делать со стилем. Согласно документации, того, что я сделал, должно быть достаточно.

Я попытался изменить имя класса ButtonToolbar на justify-content-between , но это разделяет кнопки на обоих концах столбца.

введите описание изображения здесь

           <ButtonToolbar style={{ marginTop: "17.5px" , }}>
            <Button
              size="sm"
              onClick={() => {
                setUndoPlayToggle(!undoPlayToggle);
                setPauseVariable(true);
              }}
              disabled={pitchStateLogs.length === 0}
            >
              Undo Play
            </Button>
            <Button size="sm">View Stats</Button>
          </ButtonToolbar>

Ответ №1:

Вы просто добавите поле класса ( mr-2 ) к левой кнопке:

Или выберите любое поле загрузки по вашему выбору от 0 до 5:

 <ButtonToolbar style={{ marginTop: "17.5px" }}>
  <Button
    size="sm"
    className="mr-2"
    onClick={() => {
      setUndoPlayToggle(!undoPlayToggle);
      setPauseVariable(true);
    }}
    disabled={pitchStateLogs.length === 0}
  >
    Undo Play
  </Button>
  <Button size="sm">View Stats</Button>
</ButtonToolbar>;

Живой рабочий пример:

Редактировать демонстрационную версию начальной загрузки React (раздвоенная)

Комментарии:

1. Спасибо @RyanLe. Как раз то, что мне было нужно, я не понимал, что вам нужно добавлять интервалы между кнопками по отдельности.

2. Это один из многих способов добавления интервала к кнопке, который также может быть использован с помощью гибкого трубопровода, пояса или несколькими другими способами.

Метки: ,