如何使 Bootstrap 3 布局响应 div 大小，而不是屏幕大小

Question

我有一个带有主要内容区域和固定宽度侧边栏的页面 (https://jsfiddle.net/vesg7wm0/)。我想用相同的响应式 HTML 填充侧边栏的一部分和主要内容区域的一部分（可能不会永远，但至少在我决定将它放在哪里之前）。但是，问题在于 Bootstrap 似乎根据屏幕大小而不是 div 大小来决定使用哪种大小（col-md-* 与 col-sm-*）。这意味着主要内容和侧边栏将始终使用相同的布局。

有没有办法强制固定在 300px 的侧边栏中的 html 使用 col-sm-* / col-xs-* 布局？

我认为 iframe 是一种可能的解决方案 (https://jsfiddle.net/kwzcL8y6/1/)，但这似乎有很多自己的格式问题，而且我必须将这些内容移到它自己的页面上（你知道，也许无论如何我都应该这样做）。

那么，除了 iframe，你能让 HTML 响应它的父 div，而不是总屏幕大小吗？或者是 iframe 还是什么都没有？

谢谢！

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 .sidebar-transition {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: .50s ease-in-out;
  -moz-transition: .50s ease-in-out;
  -o-transition: .50s ease-in-out;
  transition: .50s ease-in-out;
  -webkit-text-size-adjust: none;
}
.MainWindow {
  width: calc(100% - 15px);
  margin-left: 15px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.SideBar {
  position: fixed;
  top: 0;
  left: -300px;
  height: 100%;
  width: 295px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px;
}
.sidebar-toggle {
  position: absolute;
  opacity: 0;
}
.sidebar-toggle-label {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: auto;
  width: auto;
  display: block;
  position: fixed;
  left: 5px;
  top: 50%;
  cursor: pointer;
  background: rgba(0, 0, 0, .0);
  z-index: 1;
}
.sidebar-icon:before {
  content: "\f138";
}
.sidebar-toggle:checked ~ .sidebar-icon:before {
  content: "\f137";
}
.sidebar-toggle:checked ~ .sidebar-toggle-label {
  left: 292px;
}
.sidebar-toggle:checked ~ .SideBar {
  left: 0px;
}
.sidebar-toggle:checked ~ .MainWindow {
  margin-left: 300px;
  width: calc(100% - 300px);
}

<div class="container-fluid">
  <div class="row">

    <input id="sidebar-toggle" type="checkbox" name="sidebar-toggle" class="sidebar-toggle sidebar-transition" checked />
    <label for="sidebar-toggle" id="sidebar-toggle-label" class="sidebar-toggle-label fa sidebar-icon bigger-170 sidebar-transition"></label>

    <div id="SideBar" class="SideBar sidebar-transition">
      <div class="row" id="AjaxRow">
        <div class="col-md-12">
          <div class="row">
            <div class="panel panel-primary">
              <a data-toggle="collapse" data-parent="#Ajax-heading" href="#Ajax-body" aria-expanded="false" aria-controls="Ajax-body" class="section-header">
                <div class="panel-custom panel-heading" role="tab" id="Ajax-heading">
                  <div class="panel-title font14px">
                    Sidebar
                    <div class="pull-right"><i id="iAjaxImgSwap" class="fa accordion-icon"></i>
                    </div>
                  </div>
                </div>
              </a>

              <div class="row">
                <div class="col-md-12">
                  <div id="Ajax-body" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="Ajax-heading">
                    <div class="panel-body">
                      <div class="form-group">

                        <div class="row" style="margin-top: 10px">
                          <div id="ajaxPaneHtml" class="col-md-12">
                            <div class="row">
                              <div class="col-md-6 col-sm-3 col-xs-3" style="height: 50px; background-color: green"></div>
                              <div class="col-md-6 col-sm-3 col-xs-3" style="height: 50px; background-color: red"></div>
                              <div class="col-md-6 col-sm-3 col-xs-3" style="height: 50px; background-color: blue"></div>
                              <div class="col-md-6 col-sm-3 col-xs-3" style="height: 50px; background-color: yellow"></div>
                            </div>
                          </div>
                        </div>

                      </div>

                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="MainWindow" class="MainWindow col-md-12 sidebar-transition">

      <div class="row" style="margin-top: 10px">
        <div id="mainAjaxPaneHtml" class="col-md-12">
          <div class="row">
            <div class="col-md-6 col-sm-3 col-xs-3" style="height: 50px; background-color: green"></div>
            <div class="col-md-6 col-sm-3 col-xs-3" style="height: 50px; background-color: red"></div>
            <div class="col-md-6 col-sm-3 col-xs-3" style="height: 50px; background-color: blue"></div>
            <div class="col-md-6 col-sm-3 col-xs-3" style="height: 50px; background-color: yellow"></div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

Answer 1

您必须使用 JavaScript 才能使此功能适用于元素。

Bootstrap 根据屏幕大小调整其列大小的原因是因为 Bootstrap 使用媒体查询。 This 帖子解释说媒体查询旨在基于设备或 media types 工作。