内容& Google Map在Bootstrap 2列布局中的每个列的完整高度和宽度

时间:2016-11-06 10:31:25

标签: html css twitter-bootstrap twitter-bootstrap-3

我正在使用Bootstrap 3.3.7并且有一个带有固定页眉,固定页脚和2个响应列(sm-4和sm-8)的网页。

我想做的是:

  • 让两个列填充标题之间的其余高度 页脚
  • 右栏填充了谷歌地图
  • 文本div在折叠到较小屏幕时将其自身定位在地图div上方

我已设法加载到地图中,但无法让它仅显示1列的完整高度和宽度。如果我尝试设置宽度:100%然后它跳到屏幕的整个宽度而不是列。我还尝试将左侧div设置为右侧30%左侧0,右侧div设置为左侧70%和右侧0,但这会影响移动设备的响应速度。我发现了很多其他帖子,但他们都把我想要达到的响应能力搞得一团糟。

这是我想要在更大的屏幕上实现的目标:

enter image description here

在较小的屏幕上,我希望两个div在页眉和页脚之间叠加在一起。

这是我的两个列的容器:

<div class="container">   
  <div class="row">
     <div class="col-sm-4" id="testing_employers">
       texttexttexttexttexttexttext
     </div>
     <div class="col-sm-8" id="map">
     </div>
  </div>
</div>

我的完整代码(回到最近的&#34;工作&#34;版本)就在这个小提琴上:https://jsfiddle.net/havm4197/

2 个答案:

答案 0 :(得分:0)

我有同样的问题,除了我的布局我不需要页脚,我也使用不同的列大小排列。但我相信在概念上它也是同样的问题。在我的情况下,我让它像这样工作:

   <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Brand Title</a>
            </div>
        </div>
    </nav>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-1">
                <p>Side Text</p>
            </div>
            <div id="map" class="col-md-11 col-md-offset-1">
            </div>
        </div>
    </div>

然后我使用了这个CSS:

#map {
    height: 100%;
    position: absolute;
}

html, body {
    height: 100%;
    padding-top: 25px;
}

.container-fluid {
    height: 100%;
    position: relative;
}

请尝试一下,让我知道是否也能满足您的需求。

答案 1 :(得分:0)

请尝试一下

#left {
  min-height: 50vh;
  width: auto;
}

#map {
  min-height: 50vh;
  width: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container-fluid m-0 p-0">
  <nav class="navbar sticky-top navbar-light bg-light  m-0 p-0">
    <a class="navbar-brand" href="#">Sticky Header</a>
  </nav>
  <div class="row">
    <div class="col-sm-4 col-md-4 m-0 p-0">
      <div id="left" style="background-color:blue;">

      </div>
    </div>
    <div class="col-sm-8 col-md-4 m-0 p-0">
      <div id="map" style="background-color:red;">

      </div>

    </div>
  </div>
  <nav class="navbar sticky-bottom navbar-light bg-light">
    <a class="navbar-brand" href="#">Sticky Fotter</a>
  </nav>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>