Начальная загрузка 5 кнопок выравнивания в ряд

ProgramBox

Начальная загрузка 5 кнопок выравнивания в ряд

Post author:admin
Запись опубликована:13 июля, 2022
Post category:Вопросы по программированию

#javascript #html #css #bootstrap-5

#javascript #HTML #css #bootstrap-5

Вопрос:

Я пытаюсь сделать так, чтобы кнопки на моей веб-странице располагались рядом в середине страницы, это 2 класса начальной загрузки 5, которые я пробовал, и они выглядят не так, как я хочу, чтобы они выглядели:

Для справки, на некоторые вопросы будут даны ответы с несколькими кнопками (до 10: https://gyazo.com/15d810f8c0f79f23d12463db9ba50e2a ), я бы также хотел, чтобы они располагались на равном расстоянии друг от друга в ряд, примерно так: https://gyazo.com/ca1ab61aa7fef54f1cf1a099cb56a5e0

Я не уверен, что это что-то меняет, но кнопки добавляются с помощью цикла for в javascript.

Любые советы будут высоко оценены, я сильно зациклился на этом

Ответ №1:

У меня есть успех с примером class =»btn-group»:

 <div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Более подробно смотрите в:
https://www.w3schools.com/bootstrap/bootstrap_button_groups.asp

Ответ №2:

Вы можете обернуть кнопки в a flex , а затем управлять шириной вашего гибкого div с помощью пользовательского css или системы Bootstrap Grid. JSFiddle

 <div class="row">
  <div class="col-6 mx-auto">
    <div class="d-flex align-items-center justify-content-evenly">
      <button class="btn btn-primary">Button 1</button>
      <button class="btn btn-primary">Button 2</button>
    </div>
  </div>
</div>

Ответ №3:

Используйте flex CSS в примере, counter это просто для нумерации кнопок, это не обязательно.

 .center {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  counter-reset: button;
}

.btn::before {
  counter-increment: button;
  content: counter(button);
}

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<main class='container'>
  <section class='row'>
    <div class='col center'>
      <button class='btn btn-primary btn-lg'></button>
      <button class='btn btn-primary btn-lg'></button>
      <button class='btn btn-primary btn-lg'></button>
      <button class='btn btn-primary btn-lg'></button>
      <button class='btn btn-primary btn-lg'></button>
    </div>
  </section>

Развернуть фрагмент

1. Хм, произошло что-то странное, и это выглядит так: gyazo.com/cc7dc6065c2575a0ff65ad5d84115f0f

2. Обратите внимание, вот что такое centerAButtons в моем css: .centerAButtons { display: flex; flex-flow: row nowrap; justify-content: пробел между; }

3. Я что-нибудь пропустил @zer00ne

4. justify-content: space-around или center и добавить button {margin: ВЕРХНЕЕ / НИЖНЕЕ px ЛЕВОЕ / ПРАВОЕ px} ЛЕВОЕ / ПРАВОЕ значение будет пробелом между <button> s.

Ответ №4:

Добавьте элемент, который заполняет все кнопки в вашей папке css, оформите этот div этими стилями:

 { 
  display:flex; align-item:center;
  justify-content: space-around;
}

Если их много кнопок, пусть display: flex; , чтобы быть display: inline-flex; .

Ответ №5:

Вам не нужны никакие классы, по умолчанию они будут выравниваться в строке, и мы можем использовать text-center в контейнере, чтобы сделать их центрированными по горизонтали

 <script src="https://unpkg.com/@popperjs/core@2.11.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container text-center">
  <button class="btn btn-primary" type="submit">Button</button>
  <button class="btn btn-primary" type="submit">Button</button>
  <button class="btn btn-primary" type="submit">Button</button>
</div>

Развернуть фрагмент

Ответ №6:

Для этого вам не нужен bootstrap. Вы можете легко выполнить выравнивание с помощью гибкой компоновки. Bootstrap можно использовать только для элементов стиля.

Подробнее: a-guide-to-flexbox

 .container{
  margin-top:20px;
  display: flex;
}

.container{
  display: flex;
}
.cl-1{
  justify-content: center;
}
.cl-1 button{
  margin-right: 20px;
}
.cl-2{
  justify-content: space-between;
}
.cl-3{
  justify-content: space-evenly;
}
.cl-4{
  justify-content: space-around;
}

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<h2>Center align</h2>
<div class="container text-center cl-1">
  <button class="btn btn-primary" type="submit">Cancel</button>
  <button class="btn btn-primary" type="submit">Submit</button>
</div>

<h2>space-beetween</h2>
<div class="container text-center cl-2">
  <button class="btn btn-primary" type="submit">Cancel</button>
  <button class="btn btn-primary" type="submit">Submit</button>
</div>

<h2>space-evenly</h2>
<div class="container text-center cl-3">
  <button class="btn btn-primary" type="submit">Cancel</button>
  <button class="btn btn-primary" type="submit">Submit</button>
</div>

<h2>space-around</h2>
<div class="container text-center cl-4">
  <button class="btn btn-primary" type="submit">Cancel</button>
  <button class="btn btn-primary" type="submit">Submit</button>
</div>

Развернуть фрагмент

Метки: Начальная загрузка 5 кнопок выравнивания в ряд