0

这是我正在努力解决的一个真正的 Bootstrap 3 难题。看看这段代码，看看你能不能解决这个难题。我想要做的是使中心（黄色）部分高两倍（200px）用于内容目的，并将其余正方形保持在相同的位置和相同的高度（100px）。它必须保持响应。

这是我正在使用的代码 -

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
    .blue {
        height: 100px;
        background-color: blue;
        border: white solid 5px;
        color: white;
    }
    .green {
        height: 100px;
        background-color: green;
        border: white solid 5px;
        color: white;
    }
    .yellow {
        height: 100px;
        background-color: yellow;
        border: white solid 5px;
        color: black;
    }
 </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-2 blue">blue</div>
      <div class="col-sm-2 blue">blue</div>
      <div class="col-sm-2 blue">blue</div>
      <div class="col-sm-2 blue">blue</div>
      <div class="col-sm-2 blue">blue</div>
      <div class="col-sm-2 blue">blue</div>
  </div>
  <div class="row">
      <div class="col-sm-2 green">green</div>
      <div class="col-sm-8 yellow">yellow</div>
      <div class="col-sm-2 green">green</div>
      <div class="col-sm-2 green">green</div>
      <div class="col-sm-2 col-sm-offset-8 green">green</div>
  </div>
  <div class="row">
      <div class="col-sm-2 blue">blue</div>
      <div class="col-sm-2 blue">blue</div>
      <div class="col-sm-2 blue">blue</div>
      <div class="col-sm-2 blue">blue</div>
      <div class="col-sm-2 blue">blue</div>
      <div class="col-sm-2 blue">blue</div>
    </div>
  </div>

  <!-- Bootstrap core JavaScript
  ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="js/jquery.js"></script>
  <script src="js/bootstrap.min.js"></script>
 </body>
</html>
4

4 回答 4

0

如何将左右 div 对包装在列中（条形边框和填充）并使其全宽...

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap core CSS -->
  <link href="css/bootstrap.css" rel="stylesheet">
  <style type="text/css">
  .blue {
    height: 100px;
    background-color: blue;
    border: white solid 5px;
    color: white;
  }
  .green {
    height: 100px;
    background-color: green;
    border: white solid 5px;
    color: white;
  }
  .yellow {
    height: 200px;
    background-color: yellow;
    border: white solid 5px;
    color: black;
  }
  .noborder { border: 0; }
  .nopadding { padding: 0; }
  </style>
 </head>
 <body>
  <div class="container">
   <div class="row">
    <div class="col-sm-2 blue">blue</div>
    <div class="col-sm-2 blue">blue</div>
    <div class="col-sm-2 blue">blue</div>
    <div class="col-sm-2 blue">blue</div>
    <div class="col-sm-2 blue">blue</div>
    <div class="col-sm-2 blue">blue</div>
   </div>
   <div class="row">
    <div class="col-sm-2 green noborder nopadding">
     <div class="col-sm-12 green">green L1</div>
     <div class="col-sm-12 green">green L2</div>
    </div>
    <div class="col-sm-8 yellow">yellow</div>
    <div class="col-sm-2 green noborder nopadding">
     <div class="col-sm-12 green">green R1</div>
     <div class="col-sm-12 green">green R2</div>
    </div>
   </div>
   <div class="row">
    <div class="col-sm-2 blue">blue</div>
    <div class="col-sm-2 blue">blue</div>
    <div class="col-sm-2 blue">blue</div>
    <div class="col-sm-2 blue">blue</div>
    <div class="col-sm-2 blue">blue</div>
    <div class="col-sm-2 blue">blue</div>
   </div>
  </div>

  <!-- Bootstrap core JavaScript
  ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="js/jquery.js"></script>
  <script src="js/bootstrap.js"></script>
 </body>
</html>
于 2013-10-23T14:48:24.150 回答
0

我能想出的唯一方法是为平板电脑/台式机（hidden-xs）提供一个表格，而您的代码对手机可见（visible-xs）。存在复制内容的问题，但您可以使用 knockout.js 之类的东西来处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        .blue {
            height: 100px;
            background-color: blue;
            border: white solid 5px;
            color: white;
        }

        .green {
            height: 100px;
            background-color: green;
            border: white solid 5px;
            color: white;
        }

        .yellow {
            height: 100px;
            background-color: yellow;
            border: white solid 5px;
            color: black;
        }

        .tbl {
            width: 100%;
            border-collapse: separate;
        }
    </style>
</head>
<body>
    <div class="container visible-xs">
        <div class="row">
            <div class="col-sm-2 blue">blue</div>
            <div class="col-sm-2 blue">blue</div>
            <div class="col-sm-2 blue">blue</div>
            <div class="col-sm-2 blue">blue</div>
            <div class="col-sm-2 blue">blue</div>
            <div class="col-sm-2 blue">blue</div>
        </div>
        <div class="row">
            <div class="col-sm-2 green">green</div>
            <div class="col-sm-8 yellow">yellow</div>
            <div class="col-sm-2 green">green</div>
        </div>
        <div class="row">
            <div class="col-sm-2 blue">blue</div>
            <div class="col-sm-2 blue">blue</div>
            <div class="col-sm-2 blue">blue</div>
            <div class="col-sm-2 blue">blue</div>
            <div class="col-sm-2 blue">blue</div>
            <div class="col-sm-2 blue">blue</div>
        </div>
    </div>

    <div class="container hidden-xs">
        <div class="row">
            <table class="tbl">
                <tbody>
                    <tr class="tb-row">
                        <td class="col-sm-2 blue">Blue</td>
                        <td class="col-sm-2 blue">Blue</td>
                        <td class="col-sm-2 blue">Blue</td>
                        <td class="col-sm-2 blue">Blue</td>
                        <td class="col-sm-2 blue">Blue</td>
                        <td class="col-sm-2 blue">Blue</td>
                    </tr>
                    <tr class="tb-row">
                        <td class="col-sm-2 green">Green</td>
                        <td class="col-sm-8 yellow" colspan="4" rowspan="2">Yellow</td>
                        <td class="col-sm-2 green">Green</td>
                    </tr>
                    <tr class="tb-row">
                        <td class="col-sm-2 green">Green</td>
                        <td class="col-sm-2 green">Green</td>
                    </tr>
                    <tr class="tb-row">
                        <td class="col-sm-2 blue">Blue</td>
                        <td class="col-sm-2 blue">Blue</td>
                        <td class="col-sm-2 blue">Blue</td>
                        <td class="col-sm-2 blue">Blue</td>
                        <td class="col-sm-2 blue">Blue</td>
                        <td class="col-sm-2 blue">Blue</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>
于 2013-10-23T09:21:18.943 回答
0

如何将所有行包装在“col-sm-12 Yellow”类中......

<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
    .blue {
        height: 100px;
        background-color: blue;
        border: white solid 5px;
        color: white;
    }
    .green {
        height: 100px;
        background-color: green;
        border: white solid 5px;
        color: white;
    }
    .yellow {
        background-color: yellow;
        border: white solid 5px;
        color: black;
    }
 </style>
</head>
<body>
  <div class="container">
      <div class="col-sm-12 yellow">
            <div class="row">
              <div class="col-sm-2 blue">blue</div>
              <div class="col-sm-2 blue">blue</div>
              <div class="col-sm-2 blue">blue</div>
              <div class="col-sm-2 blue">blue</div>
              <div class="col-sm-2 blue">blue</div>
              <div class="col-sm-2 blue">blue</div>
          </div>
          <div class="row">
              <div class="col-sm-2 green">green</div>
              <div class="col-sm-2 col-sm-offset-8 green">green</div>
          </div>
          <div class="row">
              <div class="col-sm-2 green">green</div>
              <div class="col-sm-2 col-sm-offset-8 green">green</div>
          </div>
        <div class="row">
              <div class="col-sm-2 blue">blue</div>
              <div class="col-sm-2 blue">blue</div>
              <div class="col-sm-2 blue">blue</div>
              <div class="col-sm-2 blue">blue</div>
              <div class="col-sm-2 blue">blue</div>
              <div class="col-sm-2 blue">blue</div>
          </div>
      </div>
  </div>

  <!-- Bootstrap core JavaScript
  ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="js/jquery.js"></script>
  <script src="js/bootstrap.min.js"></script>
 </body>
</html>
于 2013-10-23T17:00:55.917 回答
0 
<style>
    div{
        height:40px;
        background-color: rgba(50,50,100,.2);
        border: solid white 5px;
    }
    .white{
        background-color: white;
    }
    .tall{
        height: 80px;
    }
    .row{
        background-color: transparent;
    }
</style>
<div class="container white">
    <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-2"></div>
        <div class="col-sm-2"></div>
        <div class="col-sm-2"></div>
        <div class="col-sm-3"></div>
    </div>
    <div class="row">
        <div class="col-sm-3 tall"></div>
        <div class="col-sm-6 tall white">BOO YA!</div>
        <div class="col-sm-3 tall"></div>
    </div>
    <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-2"></div>
        <div class="col-sm-2"></div>
        <div class="col-sm-2 white"></div>
        <div class="col-sm-3"></div>
    </div>
    <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-2"></div>
        <div class="col-sm-2"></div>
        <div class="col-sm-2"></div>
        <div class="col-sm-3"></div>
    </div>
</div>
于 2013-10-18T06:56:51.850 回答