引导结构和最佳实践

Question

嘿，我这些天在纽约的公司建立一个应用程序。 我需要我的应用程序完全响应，这意味着在任何给定的布局中，应用程序应该以良好的形状出现。 现在有几种方法可以创建响应式站点或应用程序，其中一种常见方法是使用bootstrap作为流体网格。问题是bootstrap并没有给我一个真正完整的解决方案来满足我的所有需求，而且我可能错误地使用它。 现在我将解释我的应用程序中的屏幕是什么样的。 主屏幕划分为3行，每行包含3个正方形，每个正方形为3个不同表格的容器。 当我试图决定这个布局的正确引导结构时，我的问题就开始了，因此它将是最具响应性的。 对于单个框我使用以下结构

var app = angular.module("app", []);

app.controller("mainCTRL", ['$scope',
  function($scope) {
    $scope.gases_table = {
      H2: '100',
      H3: "200",
      H4: '100',
      H5: "200",
      H6: "200",
      H7: "200"
    }
  }
]);

现在我有几个问题：

1. 当使用引导程序引入一个包含3个表的框时，这是否是正确的结构。
2. 我有一个内容重叠的问题，与他附近的其他内容重叠。
3. 如何使用公式target / context = result来实现更灵敏的布局？

重叠问题： 完整的代码在这里：



＆＃13;
＆＃13;
body {
  background-color: black;
}
.section_title {
  color: #3983C4;
}
.box {
  display: inline-block;
  /* width: auto; 
        height: auto;  Responsive changes*/
  margin: 0px;
  padding: 20px;
  border-right: 1px solid #D1D1D1;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  background: white;
  -webkit-box-shadow: 0 2px 1px rgba(170, 170, 170, 0.25);
  -moz-box-shadow: 0 2px 1px rgba(170, 170, 170, 0.25);
  -o-box-shadow: 0 2px 1px rgba(170, 170, 170, 0.25);
  box-shadow: 0 2px 1px rgba(170, 170, 170, 0.25);
}
#left_side {
  float: left;
  /* width:65%;
        overflow:hidden;*/
}
#right_side {
  float: right;
  /* width:30%;
        overflow:hidden;*/
}
＆＃13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="container-fluid" ng-app="app" ng-controller="mainCTRL">
  <div class="row">
    <div class="col-xs-10 col-sm-8 col-md-6 col-lg-4">
      <h4 class="section_title">IEEE</h4>
      <div id="IEEE_box" class="container-fluid box">
        <div class="row">
          <div id="left_side" class="col-md-6 col-lg-6">
            <table id="IEE_table_One" cellspacing="0" cellpadding="0">
              <tr>
                <td class="table_element_title">Conditions:</td>
                <td class="box_element_desc">ieeeCondition</td>
              </tr>
              <tr>
                <td class="table_element_title">Recommendation:</td>
                <td class="box_element_desc">ieee.Recommendation</td>
              </tr>
              <tr>
                <td class="table_element_title">Sampling Interval:</td>
                <td class="box_element_desc">ieee.SamplingInterval</td>
              </tr>
              <tr>
                <td class="table_element_title">TDCG:</td>
                <td class="box_element_desc">ieee.TDCG</td>
              </tr>
              <tr>
                <td class="table_element_title">TDCG:</td>
                <td class="box_element_desc">ieee.TDCG</td>
              </tr>
            </table>
          </div>
          <div id="right_side" class="col-md-6 col-lg-6">
            <table id="IEE_table_Two" cellspacing="1" cellpadding="1">
              <tr>
                <th class="tools_fault_item_title">Tools</th>
                <th class="tools_fault_item_title">Fault</th>
              </tr>
              <tr>
                <td class="tools_fault_item">Rogers</td>
                <td class="tools_fault_item">ieee.RogerFault</td>
              </tr>
              <tr>
                <td class="tools_fault_item">Durenberger</td>
                <td class="tools_fault_item">ieee.GasRatioFault</td>
              </tr>
              <tr>
                <td class="tools_fault_item">Gas Ratio</td>
                <td class="tools_fault_item">ieee.DoernenburgFault</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <table id="IEE_table_Third" class="gases_table table-bordered" cellspacing="2" cellpadding="2" border="1" style="display: inline-block">
              <tr>
                <th class="gases_table_head_item" ng-repeat="(key,value) in gases_table track by $index">
                  {{key}}
                </th>
              </tr>
              <tr>
                <td class="gases_table_item" ng-repeat="(key,value) in gases_table track by $index">
                  <span>
                                        {{value}}
                                    </span>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-10 col-sm-8 col-md-6 col-lg-4">
      <h4 class="section_title">IEEE</h4>
      <div id="IEEE_box" class="container-fluid box">
        <div class="row">
          <div id="left_side" class="col-md-6 col-lg-6">
            <table id="IEE_table_One" cellspacing="0" cellpadding="0">
              <tr>
                <td class="table_element_title">Conditions:</td>
                <td class="box_element_desc">ieeeCondition</td>
              </tr>
              <tr>
                <td class="table_element_title">Recommendation:</td>
                <td class="box_element_desc">ieee.Recommendation</td>
              </tr>
              <tr>
                <td class="table_element_title">Sampling Interval:</td>
                <td class="box_element_desc">ieee.SamplingInterval</td>
              </tr>
              <tr>
                <td class="table_element_title">TDCG:</td>
                <td class="box_element_desc">ieee.TDCG</td>
              </tr>
              <tr>
                <td class="table_element_title">TDCG:</td>
                <td class="box_element_desc">ieee.TDCG</td>
              </tr>
            </table>
          </div>
          <div id="right_side" class="col-md-6 col-lg-6">
            <table id="IEE_table_Two" cellspacing="1" cellpadding="1">
              <tr>
                <th class="tools_fault_item_title">Tools</th>
                <th class="tools_fault_item_title">Fault</th>
              </tr>
              <tr>
                <td class="tools_fault_item">Rogers</td>
                <td class="tools_fault_item">ieee.RogerFault</td>
              </tr>
              <tr>
                <td class="tools_fault_item">Durenberger</td>
                <td class="tools_fault_item">ieee.GasRatioFault</td>
              </tr>
              <tr>
                <td class="tools_fault_item">Gas Ratio</td>
                <td class="tools_fault_item">ieee.DoernenburgFault</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <table id="IEE_table_Third" class="gases_table table-bordered" cellspacing="2" cellpadding="2" border="1" style="display: inline-block">
              <tr>
                <th class="gases_table_head_item" ng-repeat="(key,value) in gases_table track by $index">
                  {{key}}
                </th>
              </tr>
              <tr>
                <td class="gases_table_item" ng-repeat="(key,value) in gases_table track by $index">
                  <span>
                                        {{value}}
                                    </span>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-10 col-sm-8 col-md-6 col-lg-4">
      <h4 class="section_title">IEEE</h4>
      <div id="IEEE_box" class="container-fluid box">
        <div class="row">
          <div id="left_side" class="col-md-6 col-lg-6">
            <table id="IEE_table_One" cellspacing="0" cellpadding="0">
              <tr>
                <td class="table_element_title">Conditions:</td>
                <td class="box_element_desc">ieeeCondition</td>
              </tr>
              <tr>
                <td class="table_element_title">Recommendation:</td>
                <td class="box_element_desc">ieee.Recommendation</td>
              </tr>
              <tr>
                <td class="table_element_title">Sampling Interval:</td>
                <td class="box_element_desc">ieee.SamplingInterval</td>
              </tr>
              <tr>
                <td class="table_element_title">TDCG:</td>
                <td class="box_element_desc">ieee.TDCG</td>
              </tr>
              <tr>
                <td class="table_element_title">TDCG:</td>
                <td class="box_element_desc">ieee.TDCG</td>
              </tr>
            </table>
          </div>
          <div id="right_side" class="col-md-6 col-lg-6">
            <table id="IEE_table_Two" cellspacing="1" cellpadding="1">
              <tr>
                <th class="tools_fault_item_title">Tools</th>
                <th class="tools_fault_item_title">Fault</th>
              </tr>
              <tr>
                <td class="tools_fault_item">Rogers</td>
                <td class="tools_fault_item">ieee.RogerFault</td>
              </tr>
              <tr>
                <td class="tools_fault_item">Durenberger</td>
                <td class="tools_fault_item">ieee.GasRatioFault</td>
              </tr>
              <tr>
                <td class="tools_fault_item">Gas Ratio</td>
                <td class="tools_fault_item">ieee.DoernenburgFault</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <table id="IEE_table_Third" class="gases_table table-bordered" cellspacing="2" cellpadding="2" border="1" style="display: inline-block">
              <tr>
                <th class="gases_table_head_item" ng-repeat="(key,value) in gases_table track by $index">
                  {{key}}
                </th>
              </tr>
              <tr>
                <td class="gases_table_item" ng-repeat="(key,value) in gases_table track by $index">
                  <span>
                                        {{value}}
                                    </span>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
＆＃13;
{{1}}
＆＃13;
＆＃13;
＆＃13;

Answer 1

您必须首先了解Bootstrap概念：您的内容会重叠，因为任何容器都有最小宽度要求 - 在您的情况下会超出它。在bootstrap中，DOM被分成12个部分，因此总和上你的容器必须等于12，例如：

<div class="col-md-6"></div><div class="col-md-6"></div>

或

<div class="col-md-4"></div><div class="col-md-4"></div><div class="col-md-4"></div>

像这样使用

<div class="col-lg-6">
            <h4 class="section_title">IEEE</h4>
            <div id="IEEE_box" class="container-fluid box">
                <div class="row">
                    <div id="left_side" class="col-md-6 col-lg-6">
                        <table id="IEE_table_One" cellspacing="0" cellpadding="0">
                            <tbody><tr>
                                <td class="table_element_title">Conditions:</td>
                                <td class="box_element_desc">ieeeCondition</td>
                            </tr>
                            <tr>
                                <td class="table_element_title">Recommendation:</td>
                                <td class="box_element_desc">ieee.Recommendation</td>
                            </tr>
                            <tr>
                                <td class="table_element_title">Sampling Interval:</td>
                                <td class="box_element_desc">ieee.SamplingInterval</td>
                            </tr>
                            <tr>
                                <td class="table_element_title">TDCG:</td>
                                <td class="box_element_desc">ieee.TDCG</td>
                            </tr>
                            <tr>
                                <td class="table_element_title">TDCG:</td>
                                <td class="box_element_desc">ieee.TDCG</td>
                            </tr>
                        </tbody></table>
                    </div>
                    <div id="right_side" class="col-md-6 col-lg-6">
                        <table id="IEE_table_Two" cellspacing="1" cellpadding="1">
                            <tbody><tr>
                                <th class="tools_fault_item_title">Tools</th>
                                <th class="tools_fault_item_title">Fault</th>
                            </tr>
                            <tr>
                                <td class="tools_fault_item">Rogers</td>
                                <td class="tools_fault_item">ieee.RogerFault</td>
                            </tr>
                            <tr>
                                <td class="tools_fault_item">Durenberger</td>
                                <td class="tools_fault_item">ieee.GasRatioFault</td>
                            </tr>
                            <tr>
                                <td class="tools_fault_item">Gas Ratio</td>
                                <td class="tools_fault_item">ieee.DoernenburgFault</td>
                            </tr>
                        </tbody></table>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <table id="IEE_table_Third" class="gases_table table-bordered" cellspacing="2" cellpadding="2" border="1" style="display: inline-block">
                            <tbody><tr>
                                <!-- ngRepeat: (key,value) in gases_table track by $index --><th class="gases_table_head_item ng-binding ng-scope" ng-repeat="(key,value) in gases_table track by $index">
                                    H2
                                </th><!-- end ngRepeat: (key,value) in gases_table track by $index --><th class="gases_table_head_item ng-binding ng-scope" ng-repeat="(key,value) in gases_table track by $index">
                                    H3
                                </th><!-- end ngRepeat: (key,value) in gases_table track by $index --><th class="gases_table_head_item ng-binding ng-scope" ng-repeat="(key,value) in gases_table track by $index">
                                    H4
                                </th><!-- end ngRepeat: (key,value) in gases_table track by $index --><th class="gases_table_head_item ng-binding ng-scope" ng-repeat="(key,value) in gases_table track by $index">
                                    H5
                                </th><!-- end ngRepeat: (key,value) in gases_table track by $index --><th class="gases_table_head_item ng-binding ng-scope" ng-repeat="(key,value) in gases_table track by $index">
                                    H6
                                </th><!-- end ngRepeat: (key,value) in gases_table track by $index --><th class="gases_table_head_item ng-binding ng-scope" ng-repeat="(key,value) in gases_table track by $index">
                                    H7
                                </th><!-- end ngRepeat: (key,value) in gases_table track by $index -->
                            </tr>
                            <tr>
                                <!-- ngRepeat: (key,value) in gases_table track by $index --><td class="gases_table_item ng-scope" ng-repeat="(key,value) in gases_table track by $index">
                                    <span class="ng-binding">
                                        100
                                    </span>
                                </td><!-- end ngRepeat: (key,value) in gases_table track by $index --><td class="gases_table_item ng-scope" ng-repeat="(key,value) in gases_table track by $index">
                                    <span class="ng-binding">
                                        200
                                    </span>
                                </td><!-- end ngRepeat: (key,value) in gases_table track by $index --><td class="gases_table_item ng-scope" ng-repeat="(key,value) in gases_table track by $index">
                                    <span class="ng-binding">
                                        100
                                    </span>
                                </td><!-- end ngRepeat: (key,value) in gases_table track by $index --><td class="gases_table_item ng-scope" ng-repeat="(key,value) in gases_table track by $index">
                                    <span class="ng-binding">
                                        200
                                    </span>
                                </td><!-- end ngRepeat: (key,value) in gases_table track by $index --><td class="gases_table_item ng-scope" ng-repeat="(key,value) in gases_table track by $index">
                                    <span class="ng-binding">
                                        200
                                    </span>
                                </td><!-- end ngRepeat: (key,value) in gases_table track by $index --><td class="gases_table_item ng-scope" ng-repeat="(key,value) in gases_table track by $index">
                                    <span class="ng-binding">
                                        200
                                    </span>
                                </td><!-- end ngRepeat: (key,value) in gases_table track by $index -->
                            </tr>
                        </tbody></table>
                    </div>
                </div>
            </div>  
        </div>
<div class="col-lg-6">'your content'</div>
//You cant fit all in a single row
<div class="col-lg-10">'your content'</div>