使用Bootstrap 3与左按钮对齐

Question

我在我的应用程序中使用Bootstrap 3，我选择了一些选项。当我尝试将此选项对齐到左侧时，会出现一个小问题。我在添加课程时选择未向左对齐：

class="col-md-8 pull-left"

或

class="col-md-8 text-left">

在div中

下面我从应用程序和我的代码显示屏幕：

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row spacer-top-3">
  <label class="form-check-label">
            Send survey for client:
        </label>
  <input id="checkbox" ng-model="sendSurvey" type="checkbox" ng-change="checkSendSurvey()" class="trans-pro-checkbox">
</div>
<div class="row">
  <div class="col-md-8">
    <select class="form-control" id="type_upload" ng-show="sendSurveyChecked">
                <option value="<% 1 %>"> Uploaded file</option>
                <option value="<% 2 %>">Shared folder</option>
            </select>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我如何才能正确对齐？我很乐意帮忙

Answer 1

您的select需要设置为特定宽度，因此请尝试固定宽度，如果不是IE或Edge，请尝试fit-content。

.control-width {
  max-width: 200px;
  //max-width:fit-content    Not in IE or Edge
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row spacer-top-3">
    <label class="form-check-label">
            Send survey for client:
        </label>
    <input id="checkbox" ng-model="sendSurvey" type="checkbox" ng-change="checkSendSurvey()" class="trans-pro-checkbox">
  </div>
  <div class="row">
    <div class="col-md-8">
      <select class="form-control control-width" id="type_upload" ng-show="sendSurveyChecked">
                <option value="<% 1 %>"> Uploaded file</option>
                <option value="<% 2 %>">Shared folder</option>
            </select>
    </div>
  </div>
</div>