Question

由于此question已过时，我的问题是如何在非流体容器中创建'org.apache.http.HttpEntity' is deprecated 'org.apache.http.HttpResponse' is deprecated 'org.apache.http.NameValuePair' is deprecated 'org.apache.http.client.HttpClient' is deprecated 'org.apache.http.client.entity.UrlEncodedFormEntity' is deprecated 'org.apache.http.client.methods.HttpPost' is deprecated 'org.apache.http.impl.client.DefaultHttpClient' is deprecated 'org.apache.http.message.BasicNameValuePair' is deprecated 'org.apache.http.params.BasicHttpParams' is deprecated 'org.apache.http.params.HttpConnectionParams' is deprecated 'org.apache.http.params.HttpParams' is deprecated 'org.apache.http.util.EntityUtils' is deprecated。

我想要一个非流体容器作为我的默认布局，但是我放置的地图，我需要它是全宽非流体。

这是我的HTML：

fluid row

<div class="container"> <div class="row-fluid"> <div id="map-canvas" class="container-fluid"></div> </div> </div>无法使用bootstrap 3，设置row-fluid只需要其父级（非流体容器）的宽度。

JS Fiddle，请增加输出窗口宽度，以便您可以看到差异。

提前致谢

Answer 1

尝试以下代码。您可以在固定布局内制作100％宽度的容器。

http://jsfiddle.net/m1L6pfwm/2/

HTML

 <div class="row row-full"> content... </>

CSS

.row-full{
  width: 100vw;
  position: relative;
  margin-left: -50vw;
  height: 100px;
  margin-top: 100px;
  left: 50%;
}

Answer 2

我不确定完全理解你的问题，但是你不能只使用Bootstrap的container-fluid来包含地图row吗？

http://bootply.com/KP9j6dKCES

<div class="container-fluid">
    <div class="row" style="height:100px; background: #f00;">
        this should take 100% width
    </div>
</div>

Answer 3

使用适当的布局或使用以下

获得相同的效果

<div class="row-fluid" style="position:absolute;z-index:5">
        <div id="map-canvas" class="container-fluid"></div>
</div>

<div class="container" style="z-index:0">
    <--fluid with respect to first static/relative parent-->
    <div class="row-fluid">
        <div id="map-canvas" class="container-fluid"></div>
    </div>
</div>

您可以使用Z-index播放相同的效果，但不能使用它的祖父

非流体容器内的引导液容器

3 个答案: