Question

我确信答案很简单，但我无法弄清楚。我有三个包含不同列表项的任务，我想使用bootstrap将它们排列在三个大小相同的列中。我把它们包裹在div class =＆＃34; col-md-4＆＃34;但他们继续出现在另一个之下。我发现这真的令人沮丧，所以任何帮助都会非常感激！

这是我的HTML：

<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link type="text/CSS" rel="stylesheet" href="path to bootstrap.css file"/>
        <link type="text/CSS" rel="stylesheet" href="Main.css"/>

        <title>Getting Started</title>
    </head>
    <body>

        <div class="prerequisites">
            <div class="container">
                <div class="row">

                    <div class="col-md-4">
                        <h3>Task 1</h3>
                        <ol>
                            <li>Step 1</li>
                            <li>Step 2</li>
                            <li>Step 3</li>
                        </ol>

                    </div>

                    <div class="col-md-4">
                        <h3>Task 2</h3>
                        <ol>
                            <li>Step 1</li>
                            <li>Step 2</li>
                            <li>Step 3</li>
                            <li>Step 4</li>
                            <li>Step 5</li>
                        </ol>


                    </div>
                    <div class="col-md-4">
                        <h3>Task 3</h3>
                        <ol>
                            <li>Step 1</li>
                            <li>Step 2</li>
                            <li>Step 3</li>
                            <li>Step 4</li>
                        </ol>

                    </div>
                </div>
            </div>
        </div>



    </body>
</html>

非常感谢！

Answer 1

首先确保您的doctype是

<!DOCTYPE html>

那个

<meta name="viewport" content="width=device-width, initial-scale=1">

和

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

位于您的html页面的头部，并带有正确的DOCTYPE。

如果问题仍然存在，我将首先检查Main.css中的任何内容是否为您的列关闭浮动。接下来，检查浏览器窗口宽度。如果我没弄错的话，它必须大于969px。你可以使用col-sm-4或col-xs-4来缩小屏幕宽度。

请参阅以下小提琴，以便将输出窗口调整到足够宽，将获得三列，但在它们之下它们会显示在彼此之上。

http://jsfiddle.net/DTcHh/521/

如果仍然无效，请发布链接，以便我们查看来源

如何使用bootstrap获得三个相等的列？

1 个答案: