0

我正在使用 Bootstrap 作为我网站的框架，但无法正确排列网格。尽管我的跨度加起来，但我无法让它与右边缘对齐（除非我增加装订线 - 这会破坏整个页面）。我真的不确定我是不是错了，所以我希望这里有人能指出我正确的方向。

下图很好地说明了这一点。我试图让帖子在左侧对齐，并让它们自己的空间足够填充容器宽度。我尝试增加装订线（这会破坏页面上的其他跨度并将第三个帖子放到新行上）。

每个“帖子”都位于间距宽度为 30px 的 span4 div 内（我认为这是默认设置）。我敢肯定这是微不足道的，但我已经盯着这个问题好几天了。每个帖子的代码是：

<div class="span4">
  <div class="postcontainer">
    <div class="imgpostcontainer"> 
        <a href="<?php the_permalink(); ?>">
        <?php $url = the_post_thumbnail('medium'); ?>
        <img src="<?php echo $url ?>">
        </a>
    </div>
    <?php get_template_part('templates/content', get_post_format()); ?>
</div>

而适用于跨度的 CSS 是：

float: left;
margin-left: 30px;
min-height: 1px;

在此处输入图像描述

这可以在这里看到：

http://192.241.203.146/
4

1 回答 1

1

第一的; margin-left:30px 不是默认值。默认为 20 像素，但如果包含响应式，如果客户端屏幕宽度大于 1200 像素，它会将边距属性调整为 30 像素。

第二; bootstraps 行总共包含 12 个跨度。当我检查您的代码时，您在一行中包含超过 12 个跨度。

关于你的问题；使用容器打开 div 后，您直接使用 span 类而不初始化行。所有跨度都必须在一个行类中。否则它将无法对齐，因为一行以左侧的 -20/30px 边距开始，而跨度中和了该边距。

于 2013-07-14T00:13:19.050 回答