Как сделать отзывчивую группу кнопок с меткой в ​​одной строке

Question

У меня есть форма, которая включает в себя список элементов. Она должна быть адаптивной и подходить для всех этих экранов. Когда я запускаю этот проект, на большом экране все выглядит хорошо, но когда я делаю его меньше, метка этого языка и егокнопки разделены так плохо, как вы можете видеть на картинке. Как я могу сделать это всегда вместе и в одном ряду? Я хочу, чтобы это выглядело как на первом изображении для больших экранов.

БОЛЬШОЙ ЭКРАН МОБИЛЬНЫЙ

Кроме того, если я сделаю этоязыковой текст h4 (как и другие названия), эта языковая метка и эти кнопки стали столь же плохими, как маленький размер. Также я хочу, чтобы эта языковая метка была h4. Вот что я попробовал ниже

 <div class=" container shadow p-3 mb-5 bg-white rounded" style="margin-top:50px;">
      <form class="form1" (ngSubmit)="onSubmit(f)" style="margin-top:10px;">
    <div class="row" style="margin-left:10px;">
      <div class="col-sm-6">
        <ul class="list-unstyled">
          <li>
            <div class="example-button-row">
                <strong style="font-size:22px;">Language</strong>
                <button style="margin-left:10px;" mat-stroked-button>English</button>
                <button mat-stroked-button>German</button>
                </div>
                <br>
          </li>
          <li>
            <strong>
              <h4 for="">Server Size</h4>
            </strong>
            <hr>
          </li>

        </ul>
      </div>
    </div>
  </form>
  </div>

Answer 1

Вы можете попробовать следующий код:

HTML:

<div class="row">
  <div class="col-sm-8">
    <div class="form-group">
      <label class="control-label sr-only" for="input_2">Input 2</label>
      <div class="btn-group" data-toggle="buttons" id="left">
        <label class="btn btn-default active">
          <input type="radio" name="options" id="option1" checked>Opt1</label>
        <label class="btn btn-default">
          <input type="radio" name="options" id="option2">Opt2</label>
      </div>
    </div>
  </div>
</div>

CSS:

#left {
    float: left;
    margin-right: 10px;
}
#right {
    overflow: hidden
}

Answer 2

Полагаю, вы можете использовать d-flex на li и добавить margin-right к тегу strong или h4. Это прекрасно работает, даже если вы в разрешении 320px. Надеюсь, это поможет Отзывчиво на 320px

Только что добавили это незначительное изменение

<li class="d-flex">
        <div class="example-button-row">
            <strong style="font-size:22px; margin-right:20px">Language</strong>
            <button mat-stroked-button>English</button>
            <button mat-stroked-button>German</button>
            </div>
      </li>

Answer 3

Вы можете попытаться поэкспериментировать с атрибутом x-overflow css ваших элементов div, но это не позволит использовать загрузочную сетку с адаптивным эффектом. Идея, лежащая в основе адаптивного дизайна, заключается не в том, чтобы он выглядел одинаково на всех экранах, а в том, чтобы узнать, сможете ли вы придумать способы сделать лучшее из каждого отдельного размера.