html - Angular-strap 的旁边与整个页面重叠

Question

我正在使用 Angular 带 aside与 Bootstrap3 .我的备用 html 模板如下 -

<div class="aside" tabindex="-1" role="dialog">
  <div class="aside-dialog">
    <div class="aside-content">
      <div class="aside-header">
        <button type="button" class="close" ng-click="$hide()">&times;</button>
        <h4 class="aside-title">Settings</h4>
      </div>
      <div class="aside-body" ng-controller="SettingsCtrl">
        <form name="createCustomerForm" role="form">
          <div class="form-group">
            <label for="settings_email">Email</label>

              <input class="form-control" id="settings_email" name="settings_email" type="text">
          </div>

          <div class="form-group">
            <label for="language">Language:&nbsp;</label>

            <button id="language" type="button" class="btn btn-default" data-html="1"
                    data-animation="am-flip-x" ng-options="country.name for country in countries track by country.id"
                    data-placeholder="Select country..."
                    ng-model="selectedLang" ng-change="onLanguageSelected(country)"
                    bs-select>
              Action <span class="caret"></span>
            </button>
          </div>
        </form>
      </div>
      <div class="aside-footer">
        <button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
      </div>
    </div>
  </div>
</div>

到目前为止这有效-

但如果我更改代码 -

<div class="aside" tabindex="-1" role="dialog">
  <div class="aside-dialog">
    <div class="aside-content">
      <div class="aside-header">
        <button type="button" class="close" ng-click="$hide()">&times;</button>
        <h4 class="aside-title">Settings</h4>
      </div>
      <div class="aside-body" ng-controller="SettingsCtrl">
        <form name="createCustomerForm" role="form">
          <div class="form-group">
            <label for="settings_email">Email</label>

            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
              <input class="form-control" id="settings_email" name="settings_email" type="text">
            </div>
          </div>

          <div class="form-group">
            <label for="language">Language:&nbsp;</label>

            <button id="language" type="button" class="btn btn-default" data-html="1"
                    data-animation="am-flip-x" ng-options="country.name for country in countries track by country.id"
                    data-placeholder="Select country..."
                    ng-model="selectedLang" ng-change="onLanguageSelected(country)"
                    bs-select>
              Action <span class="caret"></span>
            </button>
          </div>
        </form>
      </div>
      <div class="aside-footer">
        <button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
      </div>
    </div>
  </div>
</div>

然后它捕获整个窗口 -

如何让它保持相同的大小？

Answer 1

您可以在正在加载的旁边模板中的内容类上添加一个最大宽度标签。

假设