Question

我正在使用bootstrap创建我的第一个站点，并且它是一个joomla站点，其版本为2.3

我遇到了一些问题这是目前为止的代码：

<body>
<div class="container">
<div class="row logobar">
<div class="span12">
<div class="logoholder">
<img src="templates/<?php echo $this->template ?>/images/open-plan-design-logo.jpg" alt="Open Plan Design Logo " />
</div>
</div>
<!-- row --></div>....

和css

body {
    background:#231f21;
    background-color:#DCDBDB;
    color:#fff;
}

.container {
    background-color:yellow;
}

.logoholder{
    width:499px;
    margin:0 auto;
}


.logobar {
    margin-bottom:20px;
    background-color:green;
}

在缩小的屏幕宽度下，一切看起来都很好 - 图像居中，尺寸缩小

然而，在全宽度下，图像并不是完全居中的，并且左边有一个奇怪的绿色（来自.logobar）。如果我拿出.row然后绿色消失了，但当然没有什么是反复的

我想我做错了什么......

你可以在这里看到我的意思www.opd.ee-web.co.uk

Answer 1

您需要将row更改为row-fluid，这将删除此否定margin。

<div class="row-fluid logobar">

文档[1]。
更多信息[1]。

Answer 2

带有.row的元素应用了负边距，以确保并且包含的.span元素已正确对齐。

您可以使用某些自定义css删除此负边距，但这可能会导致更多问题。

理想的解决方案是简单地将logobar移至span级别。

<div class="span12 logobar">

Answer 3

在自定义css文件中添加以下代码

body .row{
    margin-left:0 !important;
}

引导程序在左侧给出额外的宽度

3 个答案: