Question

我试图获得具有相同边距和背景颜色的三个大小相同的列。但我得到第1列没有边距和背景颜色，第2列和第3列似乎没有问题。我发现这真的令人沮丧，所以任何帮助都将不胜感激！这是我的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"       href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script   src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
div1 {
    border: 1px solid grey;
    margin-top: 100px;
    margin-bottom: 50px;
    margin-right: 100px;
    margin-left: 50px;
    background-color: lightgrey;
}
div2 {
    border: 1px solid grey;
    margin-top: 100px;
    margin-bottom: 50px;
    margin-right: 100px;
    margin-left: 50px;
    background-color: lightgrey;
}
div3 {
    border: 1px solid grey;
    margin-top: 100px;
    margin-bottom: 50px;
    margin-right: 100px;
    margin-left: 50px;
    background-color: lightgrey;
}

</style>
</head>
<body>

<div class="row">
  <div1 class="col-sm-4">Column 1</div1>
  <div2 class="col-sm-4">Column 2</div2>
  <div3 class="col-sm-4">Column 3</div3>
</div>

</body>
</html>

以下是我试图获得的类似结果：

这是错误的我得到的：

Answer 1

当您使用自举时，您也可以使用自举，再加上一点css来填充内部面板（以匹配您想要的输出）。 HTML到处都是（头部代码和div *＆＃39; s）。

所以这是你的代码。

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .panel-pad-10 {
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-4 panel-pad-10">
                <div class="panel panel-default">
                  <div class="panel-body">Column 1</div>
                </div>
            </div>
            <div class="col-sm-4 panel-pad-10"> 
                <div class="panel panel-default">
                  <div class="panel-body">Column 2</div>
                </div>
            </div>
            <div class="col-sm-4 panel-pad-10">
                <div class="panel panel-default">
                  <div class="panel-body">Column 3</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

＆＃13;

Answer 2

来自：http://getbootstrap.com/css/#overview-container

Bootstrap需要一个包含元素来包装网站内容并容纳我们的网格系统。您可以选择在您的项目中使用两个容器中的一个。请注意，由于填充等原因，两个容器都不可嵌套。

所以，将它包装在像这样的容器中：

<div class="container">
    <div class="row">
      <div1 class="col-sm-4">Column 1</div1>
      <div2 class="col-sm-4">Column 2</div2>
      <div3 class="col-sm-4">Column 3</div3>
    </div>
</div>

或使用＆＃34;容器流体＆＃34;如果你想要全宽

编辑：正如劳伦斯指出的那样，如果你要使用自定义标记，你需要确保它具有display:block属性集，否则它将无法正常工作

Answer 3

你真的不应该“发明”你自己的html标签。 <div1>不是有效的HTML代码。

此外，由于div1，div2和div3都应该以相同的方式设置样式，因此您可以像这样为它们创建一个类：

.column {
    border: 1px solid grey;
    margin-top: 100px;
    margin-bottom: 50px;
    margin-right: 100px;
    margin-left: 50px;
    background-color: lightgrey;
}

然后，在你的HTML中，这样做（结合LordNeo的回复）：

<div class="container">
    <div class="row">
      <div class="col-sm-4 column">Column 1 Div</div>
      <div class="col-sm-4 column">Column 2 Div</div>
      <div class="col-sm-4 column">Column 3 Div</div>
    </div>
</div>

Answer 4

只需使用Bootstrap。您不想覆盖Bootstrap提供的内容。

<div class="row">
    <div class="col-sm-4">
        <div class="well">1
        </div>
    </div>
    <div class="col-sm-4">
        <div class="well">2
        </div>
    </div>
    <div class="col-sm-4">
        <div class="well">3
        </div>
    </div>
</div>

http://www.codeply.com/go/lUApj2LpiJ?q=

Answer 5

你试过Flexbox吗？

<!DOCTYPE html>
<html>
<head>
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    min-height: 800px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 400px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

</body>
</html>

使用bootstrap的三个相等的列

5 个答案: