Angular-strap的侧边覆盖了整个页面

Question

我在Bootstrap3中使用angular-strap aside。我的旁白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

你可以在你正在加载的模板的内容类上添加一个max-width标签。

假设