Увеличьте Bootstrap 4 ширину этикетки в модальном стиле

Question

Я пытаюсь увеличить ширину метки в форме внутри модального Boostrap. Максимальная ширина max-width: 16,66667% ;. Есть лучший способ или класс, с которым я должен установить это? Как вы можете видеть, этикетка перезаписывается, и справа много места. Я предпочел бы использовать Bootstrap классов, чем мои собственные, если это возможно.

 <form class="game-score-modal" novalidate="novalidate" action="@Url.Action(Model.Score.UpdateGameUrl)" data-bind="submit: save, with: score">

.
.
.

<div class="form-row">
    <label for="EnableSubscription">Communication</label>
    <div class="col-auto">
        <button type="button" class="btn btn-check active" data-toggle="buttons-checkbox" title="Send Email/Text"><i class="fa fa-comment"></i> </button><input checked="checked" data-bind="value: EnableSubscription,disable: EnableSubscription() == null ? true : false, checkbox: { checked: true, iconClass: 'fa fa-comment'}" id="EnableSubscription" name="EnableSubscription" title="Send Email/Text" type="checkbox" value="true"><input name="EnableSubscription" type="hidden" value="false">

        <button type="button" class="btn btn-check active" data-toggle="buttons-checkbox" title="Post To Twitter"><i class="fab fa-twitter"></i> </button><input checked="checked" data-bind="value: EnableTwitter,disable: EnableTwitter() == null ? true : false, checkbox: { checked: true, iconClass: 'fab fa-twitter'}" id="EnableTwitter" name="EnableTwitter" title="Post To Twitter" type="checkbox" value="true"><input name="EnableTwitter" type="hidden" value="false">

        <button type="button" class="btn btn-check active" data-toggle="buttons-checkbox" title="Post To Facebook"><i class="fab fa-facebook"></i> </button><input checked="checked" data-bind="value: EnableFacebook,disable: EnableFacebook() == null ? true : false, checkbox: { checked: true, iconClass: 'fab fa-facebook'}" id="EnableFacebook" name="EnableFacebook" title="Post To Facebook" type="checkbox" value="true"><input name="EnableFacebook" type="hidden" value="false">

    </div>
</div>
      <button type="submit" class="btn btn-primary"><i class="fa fa-check"></i> Save</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-ban"></i> Cancel</button>
        </div>
    </form>

Answer 1

Относитесь к форме как к сетке bootstrap, используя классы столбцов.

Переключайтесь с .row на .form-row, когда хотите, чтобы ваши желоба были компактными.

Также, если ваш модал - это просто форма, затем замените div.modal-content на form.modal-content и используйте модальные классы начальной загрузки.

Например ...

$('#updateScore').modal('show');

<div class="modal" tabindex="-1" role="dialog" id="updateScore">
  <div class="modal-dialog" role="document">

    <form class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">Update Score</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <i class="fa fa-times"></i>
        </button>
      </div>

      <div class="modal-body">

        <div class="form-group row">
          <label class="col-form-label col-sm-4 col-12 text-sm-right">Team 1</label>
          <div class="col-sm-8 col-12">
            <div class="form-row">
              <div class="form-group col-sm-3 col-4">
                <input type="number" class="form-control" />
              </div>
              <div class="form-group col-sm-6 col-8">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <label class="input-group-text">
                      Won By
                    </label>
                  </div>
                  <select class="custom-select">
                    <option selected>-</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="form-group col-12">

                <button type="button" class="btn btn-secondary">
                  <i class="fa fa-check"></i> Pool Play
                </button>

                <button type="button" class="btn btn-info">
                  <i class="fa fa-fw fa-info"></i>
                </button>

                <div class="btn-group">
                  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-circle-thin"></i>
                  </button>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Option</a>
                    <a class="dropdown-item" href="#">Option</a>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>

        <hr />

        <div class="form-group row">
          <label class="col-form-label col-sm-4 col-12 text-sm-right">Team 2</label>
          <div class="col-sm-8 col-12">
            <div class="form-row">
              <div class="form-group col-sm-3 col-4">
                <input type="number" class="form-control" />
              </div>
              <div class="form-group col-sm-6 col-8">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <label class="input-group-text">
                      Won By
                    </label>
                  </div>
                  <select class="custom-select">
                    <option selected>-</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="form-group col-12">

                <button type="button" class="btn btn-secondary">
                  <i class="fa fa-check"></i> Pool Play
                </button>

                <button type="button" class="btn btn-info">
                  <i class="fa fa-fw fa-info"></i>
                </button>

                <div class="btn-group">
                  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-circle-thin"></i>
                  </button>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Option</a>
                    <a class="dropdown-item" href="#">Option</a>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>

        <hr />

        <div class="form-group row">
          <label class="col-form-label col-sm-4 col-12 text-sm-right">Notes</label>
          <div class="col-sm-8 col-12">
            <input type="text" class="form-control" />
          </div>
        </div>

        <div class="form-group row">
          <label class="col-form-label col-sm-4 col-12 text-sm-right">Uploads</label>
          <div class="col-sm-8 col-12">
            <div class="custom-file">
              <input type="file" class="custom-file-input" id="uploads" required>
              <label class="custom-file-label" for="uploads">Choose file...</label>
            </div>
          </div>
        </div>



        <div class="form-group row">
          <label class="col-form-label col-sm-4 col-12 text-sm-right">Communication</label>
          <div class="col-sm-8 col-12">

            <button type="button" class="btn btn-primary">
              <i class="fa fa-fw fa-comment"></i>
            </button>

            <button type="button" class="btn btn-primary">
              <i class="fa fa-fw fa-twitter"></i>
            </button>

            <button type="button" class="btn btn-primary">
              <i class="fa fa-fw fa-facebook"></i>
            </button>

            <input type="hidden" value="false" />
            <input type="hidden" value="false" />
            <input type="hidden" value="false" />

          </div>
        </div>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal">
          <i class="fa fa-ban"></i> Cancel
        </button>

        <button type="submit" class="btn btn-primary">
          <i class="fa fa-check"></i> Save
        </button>

      </div>

    </form>

  </div>
</div>

<div class="container mt-3">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#updateScore">
    Launch demo modal
  </button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>