Question

我刚刚开始使用Bootstrap，我正在努力制作一个包含2列的设计，每个列的可用宽度为屏幕的50％。我可以这样做，但我还想添加一个侧栏（最终2个），可以通过网站顶部导航栏上的按钮进行切换。截至目前，我有两列和侧栏，但侧边栏显示时出现问题。我一直在玩它，只有侧边栏被隐藏才会出现两个div。我希望两个div（map和text-container）占据屏幕的所有宽度。因此，一旦侧边栏显示，两个div将缩小并向右移动。

网站网站布局的当前方式涉及包含我的两列的div。我不知道我是否正朝着正确的方向前进。

我不确定它是否与CSS或JS有关，但这里是我的div主要div，屏幕内容的CSS，以及它包含的两个列，map＆amp;文本的容器。

 html, body, #container {
   height: 100%;
   width: 100%;
   overflow: hidden;
  }
 body {
   padding-top: 50px;
  }
 input[type="radio"], input[type="checkbox"] {
  margin: 0;
  }
 #sidebar {
  width: 250px;
  height: 100%;
  max-width: 100%;
  float: left;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
     transition: all 0.25s ease-out;
  }
 #content-screen{
   float: left;
   width: 100%;
   height: 97.5%;
  }
 #map {
   width: 50%;
   height: 100%;
   box-shadow: 0 0 10px rgba(0,0,0,0.5);
   float: left;
  }
 #text-container{
   width: 50%;
   height: 100%;
   box-shadow: 0 0 10px rgba(0,0,0,0.5);
   border-style: solid;
   float: left;
  }

这是我的Jfiddle，其中包含我的大部分代码。

非常感谢你们的家园！

Bootstrap 2列设计，带有可切换的侧栏

0 个答案: