以正确的方式在模态中增加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

处理表单，因为它是您的列网格。

如果将.form-row用作.row的选项，则会使装订线变紧。但是在这种情况下，我会说使用.row。

但是如果您在右栏中有子级表单元素，则使用.form-row收紧空格。

例如...

form {
  padding: 20px;
}

<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"/>
<form>
  <div class="row mb-3">
    <div class="col-md-2 col-3 text-right">
      <label for="EnableSubscription">Label</label>
    </div>
    <div class="col-md-10 col-9">
      <input class="form-control" type="text" />
    </div>
  </div>
  <div class="row mb-3">
    <div class="col-md-2 col-3 text-right">
      <label for="EnableSubscription">Communication</label>
    </div>
    <div class="col-md-10 col-9">
      <button type="button" class="btn btn-check active">
        <i class="fa fa-comment"></i>
      </button>
      <input checked="checked"name="EnableSubscription" type="checkbox" value="true">
      <input name="EnableSubscription" type="hidden" value="false">
      <button type="button" class="btn btn-check active">
        <i class="fa fa-twitter"></i>
      </button>
      
      <input checked="checked" name="EnableTwitter" type="checkbox" value="true">
      
      <input name="EnableTwitter" type="hidden" value="false">

      <button type="button" class="btn btn-check active">
        <i class="fa fa-facebook"></i>
      </button>
      
      <input checked="checked" name="EnableFacebook" type="checkbox" value="true">
      <input name="EnableFacebook" type="hidden" value="false">

    </div>
  </div>
  
  <div class="row mb-3">
    <div class="col-md-10 col-9 offset-md-2 offset-3">
      <button type="submit" class="btn btn-primary">
        <i class="fa fa-check"></i> Save
      </button>
      <button type="button" class="btn btn-secondary">
        <i class="fa fa-ban"></i> Cancel
      </button>
    </div>
  </div>  

</form>

如果将.form-row用作.row，.form-row会使装订线变紧。