Question

当我将浏览器缩小到小而小的屏幕时，有人知道为什么我会在右侧获得空白区域吗？

图片：https://www.dropbox.com/s/jawcxtubfgdv48u/gap.png?dl=0

我使用MVC4 + bootstrap和我的自定义css。

＆＃13;

//layout.cshtml:
<div class="container">
        <div class="row">
            @RenderBody() 
  </div>
   </div>

//index.cshtml:


@section featured {
    <div class="jumbotron">
        <div class="container">
            <h2>Events.</h2>
          
        </div>
    </div>
}
<!-- Example row of columns -->
<div class="row">
    <div id="catListings" class="mainWrap clearfix">
        <div class="col-xs-12">                         
            <div class="sorting clearfix">
                <div class="totalItems">
                    <i class="fa fa-search"></i>@Model.TotalItemCount				
                </div>
                <div class="vfilters">
                    <div class="vlabel" style="float: left;">Sort</div>
                   
                </div>
            </div>
            <div id="dvCategoryResults" style="display: none">
           
            <table class="table listings">
                <tbody>               
                        @Html.Partial("_Event", @Model)                                                          
                </tbody>
            </table>
            </div>
          

            <div class="text-center">
                <ul class="clearfix pagination">
                    Stran @(Model.dogodki.PageCount < Model.dogodki.PageNumber ? 0 : Model.dogodki.PageNumber) od @Model.dogodki.PageCount</>
                    @Html.PagedListPager(Model.dogodki, page => Url.Action("GetSortedDogodki",  new { page, sortOrder = ViewBag.CurrentSort }))                    
                </ul>
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 1

通常这是因为NOT使用容器包装器。尝试在所有部分添加.container课程或.container-fluid，您的问题应该消失。

如果这不能解决您的问题，请发布代码链接。

Answer 2

请提供你的风格。但正如我从截图中看到的那样，你的mainWrap容器上的填充或边距可能有问题。

Answer 3

我在行周围添加了div，问题解决但我不明白为什么，因为我在母版页中定义了.container，并且所有页面都在此layout.cshtml中呈现。

//layout.cshtml:
<div class="container"> // Container for all pages
        <div class="row">
            @RenderBody() //I render all sites inside container
  </div>
   </div>

//index.cshtml:


@section featured {
    <div class="jumbotron">
        <div class="container">
            <h2>Events.</h2>
          
        </div>
    </div>
}
<!-- Example row of columns -->
   <div class="container"> //this has fixed the problem
<div class="row">
  
         
    </div>
</div>

Bootstrap 3是什么导致小设备上的空白区域

3 个答案: