Question

我有以下index.html。

<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
    <link rel="stylesheet" href="styles/settingsStyles/generalSettings.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  </head>
  <body ng-app="assignment3App">
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->

      <div class="container">
          <div class="row">
              <div class="col-md-2">
                      <h5> Language: </h5> 
                      <h5> Phone numbers: </h5> 
                      <h5> Maximum page size: </h5> 
                      <h5> Default reply behavior: </h5> 
                      <h5> Undo Send: </h5> 
                      <h5> Signature: </h5> 
              </div>

              <div class="col-md-10 rightPane">
                    <div class="col-lg-10"> 
                        <h5> Gmail display language: </h5> 
                    </div>

                    <div class="col-lg-10"> 
                        <h5> Default country code:  </h5> 
                    </div>

                    <div class="col-lg-10"> 
                      <h5> Show conversations per page</h5> 
                      <h5> Show contacts per page</h5>
                    </div>

                    <div class="col-lg-10"> 
                      <h5> Reply </h5> 
                      <h5> Reply all</h5> 
                    </div>

                    <div class="col-lg-10"> 
                      <h5> Enable Undo Send </h5> 
                      <h5> Send cancellation period: </h5> 
                    </div>
                      <div class="col-lg-10"> 
                        <h5> No signature </h5> 
                      </div>
                </div>
              </div>
          </div>
      </div>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
     <script>
       !function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
       (A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
       r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
       }(window,document,'script','//www.google-analytics.com/analytics.js','ga');

       ga('create', 'UA-XXXXX-X');
       ga('send', 'pageview');
    </script>

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <script src="scripts/controllers/about.js"></script>
        <!-- endbuild -->
</body>
</html>

GeneralSettings.css

div div {
    background-color: #EAE7E7;
}

.rightPane div {
    border-bottom: 1px solid #BAB7B7;
}

.rightPane div:last-child {
    border-bottom: 0;
}

这是页面呈现的方式：

我有以下问题：

1）有没有办法让左栏内容与正确的列内容完全一致？

2）当窗口大小减小时，右列内容被推送到左列内容下。我不希望这种情况发生。我只想减少列的宽度。有没有办法实现这个目标？

这是更新的jsfiddle，包括bootstrap css和js

Updated Jsfiddle

更新 - 第一个问题

我使用bootstrap表而不是流体两列布局来实现左右列中相同的行高。

<div class="container">
    <h2>General Settings</h2>            
    <table class="table">
      <tbody>
        <tr class="success">
          <td>Language</td>
          <td>Gmail display language:</td>
        </tr>

        <tr class="danger">
          <td>Phone numbers:</td>
          <td>Default country code:</td>
        </tr>

        <tr class="info">
          <td>Maximum page size: </td>
          <td>Show conversations per page <br> Show contacts per page</td>
        </tr>

        <tr class="success">
          <td>Default reply behavior:</td>
          <td>Reply <br> Reply all</td>
        </tr>

        <tr class="danger">
          <td>Undo Send:</td>
          <td>Enable Undo Send <br>  Send cancellation period:</td>
        </tr>

        <tr class="info">
          <td>Signature:  </td>
          <td> No signature</td>
        </tr>
      </tbody>
    </table>
  </div>

Answer 1

对于（2），这很简单。使用col-xs-X类而不是col-md-X。

使用col-xs，您可以告诉Bootstrap在最小的设备上使用指定的列宽（如果没有其他col-类则使用更大的列宽）。使用col-md，您可以指定列应该用于中等屏幕，但不能用于较小的列。然后Bootstrap将列堆叠在较小的屏幕上。

请参阅docs on grid options 了解概述。

对于（1），我认为最简单的解决方案是模仿具有相同元素的结构。但是，对于包装文本，这仍然是未对齐的。那你基本上有两个选择：

将元素指定为固定高度。这可能适用于您的情况，也可能不适用。
做一些JavaScript技巧来同步双方的元素高度。如果你想走这条路，this answer可能会提供一个起点。

Answer 2

对于你的第一个问题，就像这样包装你的代码我认为你将如何能够实现你的第一个

＆＃13;

<div class="col-md-2">
  <div class="container">
                      <h5> Language: </h5> 
                      <h5> Phone numbers: </h5> 
                      <h5> Maximum page size: </h5> 
                      <h5> Default reply behavior: </h5> 
                      <h5> Undo Send: </h5> 
                      <h5> Signature: </h5> 
              </div>
</div>

＆＃13;

Look demo

Answer 3

为您的列div添加了col-xs-6。

div div {
	background-color: #EAE7E7;
}

.rightPane div {
	border-bottom: 1px solid #BAB7B7;
}

.rightPane div:last-child {
	border-bottom: 0;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="container">
          <div class="row">
              <div class="col-md-6 col-xs-6">
                      <h5> Language: </h5> 
                      <h5> Phone numbers: </h5> 
                      <h5> Maximum page size: </h5> 
                      <h5> Default reply behavior: </h5> 
                      <h5> Undo Send: </h5> 
                      <h5> Signature: </h5> 
              </div>

              <div class="col-md-6  col-xs-6 rightPane">
                    <div class="col-lg-10"> 
                        <h5> Gmail display language: </h5> 
                    </div>

                    <div class="col-lg-10"> 
                        <h5> Default country code:  </h5> 
                    </div>

                    <div class="col-lg-10"> 
                      <h5> Show conversations per page</h5> 
                      <h5> Show contacts per page</h5>
                    </div>

                    <div class="col-lg-10"> 
                      <h5> Reply </h5> 
                      <h5> Reply all</h5> 
                    </div>
                    
                    <div class="col-lg-10"> 
                      <h5> Enable Undo Send </h5> 
                      <h5> Send cancellation period: </h5> 
                    </div>
                      <div class="col-lg-10"> 
                        <h5> No signature </h5> 
                      </div>
                </div>
              </div>
          </div>
      </div>

Answer 4

我有解决方案可以查看：不知怎的，因为bootstrap没有连接它，所以它不适合小提琴。复制整个代码并将其粘贴到您的HTML中，这绝对有效。（记住别忘了用你的html连接bootstrap）。

HTML：

<div class="container">
          <div class="row tableAlign">
            <div class="col-xs-12 ">
                <div class="col-xs-2 leftPane"> 
                    <h5> Language: </h5> 
                </div>
                <div class="col-xs-10 rightPane">
                    <h5> Gmail display language: </h5> 
                </div>
            </div>
            <div class="col-xs-12 ">
                <div class="col-xs-2 leftPane">     
                    <h5> Phone numbers: </h5>
                </div>
                <div class="col-xs-10 rightPane">
                    <h5> Default country code:  </h5> 
                </div>
            </div>
            <div class="col-xs-12 ">
                <div class="col-xs-2 leftPane">         
                    <h5> Maximum page size: </h5> 
                </div>
                <div class="col-xs-10 rightPane">
                    <h5> Show conversations per page</h5> 
                    <h5> Show contacts per page</h5>
                </div>
            </div>
            <div class="col-xs-12 ">
                <div class="col-xs-2 leftPane"> 
                    <h5> Default reply behavior: </h5> 
                </div>
                <div class="col-xs-10 rightPane"> 
                    <h5> Reply </h5> 
                    <h5> Reply all</h5> 
                </div>
            </div>
            <div class="col-xs-12 ">
                <div class="col-xs-2 leftPane"> 
                    <h5> Undo Send: </h5> 
                </div>
                <div class="col-xs-10 rightPane"> 
                    <h5> Enable Undo Send </h5> 
                    <h5> Send cancellation period: </h5> 
                </div>
            </div>
            <div class="col-xs-12 ">
                <div class="col-xs-2 leftPane"> 
                    <h5> Signature: </h5>
                </div>
                <div class="col-xs-10 rightPane"> 
                    <h5> No signature </h5> 
                </div>
            </div>  

        </div>
    </div>

CSS：

.container {
        background-color: #EAE7E7;
    }

    .tableAlign .rightPane, .tableAlign .leftPane  {
        padding-left:0;
        padding-right:0;
    }
    .tableAlign .rightPane{
        border-bottom:1px solid #BAB7B7;
    }

    @media (max-width:1199px) {
        .tableAlign .leftPane {
            width:20%;
        }
        .tableAlign .rightPane {
            width:70%;
        }
    }
    @media (max-width:992px) {
        .tableAlign .leftPane {
            width:25%;
        }
        .tableAlign .rightPane {
            width:75%;
        }
    }
    @media (max-width:720px) {
        .tableAlign .leftPane {
            width:30%;
            padding-right:15px;
        }
        .tableAlign .rightPane {
            width:70%;
        }
    }
    @media (max-width:479px) {
        .tableAlign .leftPane {
            width:40%;
        }
        .tableAlign .rightPane {
            width:60%;
        }
    }

Bootstrap两列布局

4 个答案: