Question

<body>
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="well">column1</div>
                </div>
                <div class="col-lg-8">
                    <div class="well">column2</div>
                </div>
            </div>
        </div>
</body>

this my body this should display two coloums side by side, 
however this is not displaying side by side, its displaying 
one after another please see the screen shot

how to fix this could you please tell me ?

=============================================== ================================================== ================================================== ================================================== ==

以下是完整的来源

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title Page</title>

    <!-- Bootstrap CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-8">
                column1
            </div>
            <div class="col-xs-4">
                column2
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="http://code.jquery.com/jquery.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="js/bootstrap.min.js"></script>
  </body>
  </html>

Answer 1

Bootstrap包括一个响应式移动第一流体网格系统，随着设备或视口大小的增加，可以适当地扩展到12列。它包括用于简单布局选项的预定义类，以及用于生成更多语义布局的强大混合。

Bootstrap's Grid System documentation.

如果您希望在不同的浏览器尺寸上彼此相邻有两列，则应使用xs类。

<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="well">Column 1</div>
    </div>
    <div class="col-xs-8">
      <div class="well">Column 2</div>
    </div>
  </div>
</div>

CODEPEN EXAMPLE

Answer 2

使用12列网格计算引导程序，因此如果您只需要两列，也会计入12列！

例如：02.10; 6/6; 4/8;等

jsfiddle.net/kga1h3yo/1 /

列未按要求显示

2 个答案:

CODEPEN EXAMPLE