2

我在使用 Bootstrap 时遇到问题。查看下图的红线。

Jumbotron在右边几乎没有对齐。它适合标题区域的图像 div。但是，borders会导致页眉区域看起来像错误的边距。正确的外观应该是左起 -20 像素，右起 -20 像素，以符合下面的要求。

我已经尝试了很多东西，但无法解决问题。

我怎样才能使边框与下面正确对齐？如果使用边框不是一个好主意，我如何通过使用其他 html/css 标签来复制它？

资料来源：使用 Bootstrap 3

<div class="container">
    <div class="row">
        @for($i = 0; $i < 3; $i++)
        <div class="col-xs-12 col-sm-4 col-lg-4 header-news-section">
            <img src="{{ URL::to('TEST/haber.jpg') }}"class="img-rounded header-news-section-image pull-left" alt="Haber">

            <a href="#">
                {{ $a = rand(0, 99) }}
                @for($y = 0; $y <= $a; $y++)
                    {{ $y }}
                @endfor
            </a>
        </div>
        @endfor
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-9">
            <div class="jumbotron">
                 <h1>Hello, world!</h1>
........

.header-news-section {
    min-height: 60px;
    border-color: #EEEEEE #CCCCCC #CCCCCC #EEEEEE;
    border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 1px;
    margin-left: 0px;
    margin-bottom: 10px;
    margin-top: -5px;
}

.header-news-section a {
    display: block;
}

img.header-news-section-image {
    height: 60px;
    width: auto;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
}

编辑：我已经通过做<div class="row" style="margin: 0px 0px 0px 0px;">. 任何人都知道为什么首先引起它？

4

1 回答 1

0

您的问题是由于header-news-section第一行的附加 CSS 类与margin-left: 0px;. 这会覆盖为列类定义的原始边距，因此新闻文章看起来比您的 Jumbotron 更靠左。

这是引导文档中的相关部分：

列通过填充创建排水沟（列内容之间的间隙）。该填充通过 .rows 上的负边距在第一列和最后一列的行中偏移。

只需div在这样的列中添加另一个，您可以在其中应用自定义样式：

<div class="col-xs-12 col-sm-4 col-lg-4">
    <div class="header-news-section">
        <img src="{{ URL::to('TEST/haber.jpg') }}"class="img-rounded header-news-section-image pull-left" alt="Haber">
        <a href="#"> {{ $a = rand(0, 99) }} @for($y = 0; $y <= $a; $y++) {{ $y }} @endfor</a>
    </div>
</div>

也许您必须在此之后编辑您的 CSS，但这是使用引导程序的正确方法。

于 2014-05-12T17:35:53.120 回答