Question

我正在尝试水平显示内容，但结果并不像预期的那样。

第五栏（“内容5”）应显示在左下方，并与上面的内容对齐。

这是我的代码：

<!DOCTYPE html>
<html class="no-js" lang="fr"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="container-fluid">
<div class="row">
<div class="col-md-12">

<div class="row">

<div class="col-md-3 col-sm-4 col-xs-6">
<h3>Content 1</h3>
<h4><a href="#">test</a></h4>
<p>test</p>
<p><span class="my-title">0,00&nbsp;€</span></p>
</div>

<div class="col-md-3">
<h3>Content 2</h3>
<h4><a href="#">test</a></h4>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p><span class="my-title">638,25&nbsp;€</span></p>
</div>

<div class="col-md-3">
<h3>Content 3</h3>
<h4><a href="#">tablo</a></h4>
<p>tablo tablo tablo tablo tablo tablo tablo tablo tablo </p>
<p><span class="my-title">555,00&nbsp;€</span></p>
</div>

<div class="col-md-3">
<h3>Content 4</h3>
<h4><a href="#">stage castagnettes avec toto</a></h4>
<p>stage castagnettes avec toto</p>
<p><span class="my-title">57,50&nbsp;€</span></p>
</div>

<div class="col-md-3">
<h3>Content 5</h3>
<h4><a href="#">reservation trop cool</a></h4>
<p>reservation trop cool</p>
<p><span class="my-title">50,00&nbsp;€</span></p>
</div>

</div>
</div>
</div>
</div>
</div>
</body>
</html>

Answer 1

在bootstrap中，每.col .row s的总和不能超过12（使用引导程序中的默认网格），并且您有5个col .col-md-3 ，因此3x5 = 15高于12（默认情况下允许最大网格引导）

所以你必须为第五个添加另一个.row。

在bootstrap docs

上查看有关网格的更多信息

注意您不需要嵌套.row。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 col-sm-4 col-xs-6">
      <h3>Content 1</h3>
      <h4><a href="#">test</a></h4>
      <p>test</p>
      <p><span class="my-title">0,00&nbsp;€</span>
      </p>
    </div>
    <div class="col-md-3">
      <h3>Content 2</h3>
      <h4><a href="#">test</a></h4>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa
      </p>
      <p><span class="my-title">638,25&nbsp;€</span>
      </p>
    </div>
    <div class="col-md-3">
      <h3>Content 3</h3>
      <h4><a href="#">tablo</a></h4>
      <p>tablo tablo tablo tablo tablo tablo tablo tablo tablo</p>
      <p><span class="my-title">555,00&nbsp;€</span>
      </p>
    </div>
    <div class="col-md-3">
      <h3>Content 4</h3>
      <h4><a href="#">stage castagnettes avec toto</a></h4>
      <p>stage castagnettes avec toto</p>
      <p><span class="my-title">57,50&nbsp;€</span>
      </p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3">
      <h3>Content 5</h3>
      <h4><a href="#">reservation trop cool</a></h4>
      <p>reservation trop cool</p>
      <p><span class="my-title">50,00&nbsp;€</span>
      </p>
    </div>
  </div>
</div>

＆＃13;

Bootstrap 3：新行中的内容未对齐

1 个答案: