I am using bootstrap, the container is 915px width, I am running in mobile browser. The problem is the div with background color is supposed to occupy the whole width, but there are some white margins. how can i extend the div a few pixel in each side?
我正在使用bootstrap,容器宽度为915px,我在移动浏览器中运行。问题是具有背景颜色的div应该占据整个宽度,但是有一些白色边缘。我怎样才能将div扩展到每一边的几个像素?
<div class="container">
<div class="" style="width:100%;height:90px;background-color:Red;margin-left:50px;">
</div>
</div>
4 个解决方案
#1
0
Have you tried using a different container class from Bootstrap?
您是否尝试过使用Bootstrap中的其他容器类?
Perhaps "container-fluid" as described below and on the Bootstrap component page - http://getbootstrap.com/css/
也许是“容器流体”,如下所述和Bootstrap组件页面 - http://getbootstrap.com/css/
Containers
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
Bootstrap需要一个包含元素来包装网站内容并容纳我们的网格系统。您可以选择在项目中使用两个容器中的一个。请注意,由于填充等原因,两个容器都不可嵌套。
Use .container for a responsive fixed width container.
使用.container作为响应式固定宽度容器。
<div class="container">
...
</div>
Use .container-fluid for a full width container, spanning the entire width of your viewport.
<div class="container-fluid">
...
</div>
You could also mix and match via Media Queries and JavaScript if you wanted to. For example on certain Media Query dimension triggers compensate for the style overrides you wish to be used.
如果您愿意,也可以通过媒体查询和JavaScript进行混合和匹配。例如,某些Media Query维度触发器会补偿您希望使用的样式覆盖。
Reference:
#2
0
Try adding a negative margin
尝试添加负边距
margin-left: -15px;
margin-right: -15px;
#3
0
From what you've posted, it looks like the inner div is 100% of the container.
从您发布的内容来看,内部div看起来是容器的100%。
Either put the inner div outside of the container or make the container 100% width (there are other bootstrap containers for this).
将内部div放在容器外面或使容器100%宽度(为此还有其他引导容器)。
#4
0
You can try use .row:
你可以尝试使用.row:
<div class="container">
<div class="row" style="
width:100%;height:90px;background-color:Red;margin-left:50px;">
</div>
</div>
#1
0
Have you tried using a different container class from Bootstrap?
您是否尝试过使用Bootstrap中的其他容器类?
Perhaps "container-fluid" as described below and on the Bootstrap component page - http://getbootstrap.com/css/
也许是“容器流体”,如下所述和Bootstrap组件页面 - http://getbootstrap.com/css/
Containers
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
Bootstrap需要一个包含元素来包装网站内容并容纳我们的网格系统。您可以选择在项目中使用两个容器中的一个。请注意,由于填充等原因,两个容器都不可嵌套。
Use .container for a responsive fixed width container.
使用.container作为响应式固定宽度容器。
<div class="container">
...
</div>
Use .container-fluid for a full width container, spanning the entire width of your viewport.
<div class="container-fluid">
...
</div>
You could also mix and match via Media Queries and JavaScript if you wanted to. For example on certain Media Query dimension triggers compensate for the style overrides you wish to be used.
如果您愿意,也可以通过媒体查询和JavaScript进行混合和匹配。例如,某些Media Query维度触发器会补偿您希望使用的样式覆盖。
Reference:
#2
0
Try adding a negative margin
尝试添加负边距
margin-left: -15px;
margin-right: -15px;
#3
0
From what you've posted, it looks like the inner div is 100% of the container.
从您发布的内容来看,内部div看起来是容器的100%。
Either put the inner div outside of the container or make the container 100% width (there are other bootstrap containers for this).
将内部div放在容器外面或使容器100%宽度(为此还有其他引导容器)。
#4
0
You can try use .row:
你可以尝试使用.row:
<div class="container">
<div class="row" style="
width:100%;height:90px;background-color:Red;margin-left:50px;">
</div>
</div>