Как вы положили одну кнопку в верхней части строки с начальной загрузкой BTN-группы?

Question

У меня 11 кнопок в 3 рядах, и так как одна «одна», я хочу ее сверху, а затем два ряда кнопок.

Я попробовал все классы flex-end и выравнивания содержимого, которые я знаю Но никто, казалось, не делал то, что я хочу. Я пробовал это во всех вариациях:

align-content: flex-end;
align-self: flex-end;
justify-content: flex-end;
flex-direction: row;

<div class="btn-group btn-group-toggle" data-toggle="buttons" 
id="user_skill_level"> 
... the buttons 
</div>

Answer 1

Возможно, вам придется объединить flex-direction: row-reverse; и flex-wrap: wrap-reverse;, чтобы получить то, что вы хотите.

Макет

Чтобы не перепутать со значением по умолчанию Bootstrap стиль, я создал пользовательский класс с именем .btn-group-custom.

<div class="btn-group btn-group-custom">
    <button type="button" class="btn btn-primary">Button 1</button>
    <button type="button" class="btn btn-primary">Button 2</button>
    <button type="button" class="btn btn-primary">Button 3</button>
    <button type="button" class="btn btn-primary">Button 4</button>
    <button type="button" class="btn btn-primary">Button 5</button>
    <button type="button" class="btn btn-primary">Button 6</button>
    <button type="button" class="btn btn-primary">Button 7</button>
    <button type="button" class="btn btn-primary">Button 8</button>
    <button type="button" class="btn btn-primary">Button 9</button>
    <button type="button" class="btn btn-primary">Button 10</button>
    <button type="button" class="btn btn-primary">Button 11</button>
</div>

Стили

.btn-group-custom {
    /* 
     * Wrap the overflow in the reverse order so that the "alone" would be on top
     * instead of on the bottom
     */
    flex-wrap: wrap-reverse;

    /*
     * You didn't mention where to put the "alone" button so I assumed you want it
     * to be on the right side.
     * Displaying the whole row in reverse order can achieve that!
     */
    flex-direction: row-reverse;
}

.btn-group-custom > .btn {
    /* Since you want 5 buttons in a row */
    width: 20%;
}

.btn-group-custom > .btn:first-child,
.btn-group-custom > .btn:last-child {
    border-radius: 0 !important;
}

/* Optional: to make rounded corner on the first and last child */
.btn-group-custom > .btn:first-child {
    border-bottom-right-radius: .25rem !important;
}

.btn-group-custom > .btn:last-child {
    border-top-left-radius: .25rem !important;
}

Результат

демо: https://jsfiddle.net/davidliang2008/a3s7zno1/33/

Answer 2

Я предполагаю, что «одна» кнопка должна быть в центре. Попробуйте это:

<div class="container">
  <div class="row">
    <button class="btn">Button 1</button>
  </div>
  <div class="row">
  <button class="btn">Button 2</button>
    <button class="btn">Button 3</button>
    <button class="btn">Button 4</button>
    <button class="btn">Button 5</button>
    <button class="btn">Button 6</button>
  </div>
  <div class="row">
    <button class="btn">Button 7</button>
    <button class="btn">Button 8</button>
    <button class="btn">Button 9</button>
    <button class="btn">Button 10</button>
    <button class="btn">Button 11</button>
  </div>
</div>

и CSS

.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.row {
  margin: 0 auto;
}