如何将网页划分为2个部分，第2部分包含4个部分 - Bootstrap

时间：2017-06-14 11:53:28

标签： jquery html css twitter-bootstrap

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="style.css">


</head>

<body class="line">
  <div class="container-fluid">
    <div class="line">
      <div class="col-md-3" style="background-color:#F5F5DC;">
        First column
      </div>

      <div id=second class="col-md-9" style="background-color:yellow;">
        <div id=firstleft class="col-md-6" style="background-color:blue;">First</div>
        <div id=firstright class="col-md-6" style="background-color:red;">Second</div>
        <div id=secondleft class="col-md-6" style="background-color:yellow;">Third</div>
        <div id=secondright class="col-md-6" style="background-color:green;">Fourth</div>
      </div>
    </div>
  </div </body>

</html>
＆＃13;
＆＃13;
＆＃13;

我是网络开发的新手，但我想重新设计和开发一个看起来像附加图像的主页。

我尝试使用bootstrap网格找到解决方案。但我没有得到正确的显示。

预期结果应为

Expected Result

我得到的实际结果

Actual Result

我已经创建了HTML文件，但对如何编写css文件感到困惑，通过该文件我可以实现预期的结果。

4 个答案:

答案 0 :(得分：0)

我不明白。究竟想要实现什么？ （另请再看看你的HTML结构。你应该使用row not line）

我想你想要这样的东西？使用row-eq-height具有相等的高度列（它使用flexbox）

请参阅下面的代码段或jsFiddle 

.col-sm-6 {
  height: 300px;
  overflow-y: auto;
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row row-eq-height">
    <div class="col-md-3" style="background-color:#F5F5DC;">
      First column
    </div>

    <div id=second class="col-md-9 col-sm-9 col-xs-9" style="background-color:yellow;">
      <div class="row row_inner">


        <div id=firstleft class="col-md-6 col-sm-6 col-xs-6" style="background-color:blue;">Lorem ipsum dolor sit amet, nullam eros posuere quam, non ipsum ornare vehicula. In integer, ac tempus aenean lorem nec amet ac, non blandit class, eget odio eu, mollis mauris massa. In augue erat convallis, morbi lectus lobortis tempor in lorem.
          Dis et morbi consectetuer non, tempor pretium. Leo dolor erat orci, lobortis adipisicing scelerisque integer diam lorem, tempus non, dolor libero vivamus velit. Viverra ipsum quam id in arcu, ligula tortor laoreet fermentum sit ipsum. Erat dapibus
          nulla justo vitae, feugiat nullam felis sollicitudin, dolor wisi mauris, tristique tempus nunc tristique. Velit non, duis auctor a. Ipsum pede maecenas vestibulum id ornare, ac facilisi wisi maecenas sem ultrices, non pede cupiditate mollis
          lorem condimentum, suscipit integer etiam mauris amet. Magna rutrum cras, tincidunt lacus ut, lectus donec, scelerisque mauris elementum non ac. Morbi cursus tortor vehicula molestiae metus ipsum.</div>
        <div id=firstright class="col-md-6 col-sm-6 col-xs-6" style="background-color:red;">Second</div>
      </div>
      <div class="row row_inner">
        <div id=secondleft class="col-md-6 col-sm-6 col-xs-6" style="background-color:yellow;">Third</div>
        <div id=secondright class="col-md-6 col-sm-6 col-xs-6" style="background-color:green;">Fourth</div>
      </div>
    </div>
  </div>
</div>

我还添加了sm和xs类仅用于示例目的

答案 1 :(得分：0)

将单位vh用于身高的示例...全屏显示您描述的效果。

＆＃13;
＆＃13; 
.left {
  overflow: auto;
  height: 100vh;
}

.blocks {
  overflow: auto;
  height: 50vh;
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>
  <div class="container-fluid page">
    <div class="row">
      <div class="col-md-3 left" style="background-color:#F5F5DC;">
        First column
      </div>

      <div id="second" class="col-md-9" style="background-color:yellow;">
        <div class="row">


          <div id="firstleft" class="col-md-6 blocks" style="background-color:blue;">
            Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br>Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br>

          </div>
          <div id="firstright" class="col-md-6 blocks" style="background-color:red;">
            Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br>Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br>
          </div>
          <div id="secondleft" class="col-md-6 blocks" style="background-color:yellow;">
            Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br>Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br>
          </div>
          <div id="secondright" class="col-md-6 blocks" style="background-color:green;">
            Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br>Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br> Content
            <br>
          </div>
        </div>
      </div>
    </div>
  </div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

这里你去...使用弹性盒很容易.. 

*{
  box-sizing:border-box;
}
html,body{
  height:100%;
  margin:0;
}
.container {
  height: 100%;
  width: 100%;
  display: flex;
  display: -ms-flexbox;
  flex-direction: row;
  -ms-flex-direction: row;
}
.sidebar {
  width: 150px;
  background-color: blue;
  color:#fff;
}
.content-wrap {
  position: relative;
  flex: 1;
  -ms-flex: 1;
  background-color: #ccc;
  display: flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-direction: row;
  -ms-flex-direction: row;
}
.child {
  display: flex; 
  display: -ms-flexbox;
  flex-basis: 50%;  
  justify-content: center;
  flex-direction: column;
  -ms-flex-direction: column;
}
.child1{
  background-color:#ccc;
}
.child2{
  background-color:#333;
}
.child3{
  background-color:#999;
}
.child4{
  background-color:#666;
}
<div class="container">
    <div class="sidebar"> checkboxes</div>
    <div class="content-wrap">
        <div class="child child1"></div>
      <div class="child child2"></div>
      <div class="child child3"></div>
      <div class="child child4"></div>
    </div>
</div>

答案 3 :(得分：0)

.row
{
    overflow: hidden;
}

.sidebar
{
    padding-bottom: 1005px;
    margin-bottom: -1000px;
    background-color: #a5a5a5;
}
.col-md-6 
{
    height: 300px;
}
.grid1, .grid4 
{
    background-color: #cccccc;
}
.grid2, .grid3 
{
    background-color: #f5f5f5;
}

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2 sidebar">Sidebar</div>
        <div class="col-md-10 content">
            <div class="row">
                <div class="col-md-6 grid1">1st scrollable grid</div>
                <div class="col-md-6 grid2">2st scrollable grid</div>
                <div class="col-md-6 grid3">3st scrollable grid</div>
                <div class="col-md-6 grid4">4st scrollable grid</div>
            </div>
        </div>
    </div>
</div>

enter image description here

相关问题
最新问题