角度带一边重叠整页

Question

我使用带有aside的棱角带Bootstrap3。我的旁边html模板如下 -

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

到目前为止这是有效的 -

但如果我改变代码 -

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

然后它捕获了整个窗口 -

如何让它保持相同的尺寸？

Answer 1

您可以在正在加载的旁白模板中的内容类中添加max-width标记。

假设