如何在最大宽度上增加Bootstrap容器的宽度？

我已将DataTable放置在容器类型的Bootstrap div中。当我在浏览器的最大宽度上运行网站时，表格的容器会添加一个滚动条并切断表格中的最后一列。如何在最大宽度上增加Bootstrap容器的宽度？

我尝试使用container-fluid div类型作为建议here，但这会进一步降低表格容器的宽度。

在检查似乎元素周围container body-content继承形式布局页面添加边缘左侧和右侧的表容器：

一个可行的办法，我想，如果在最大宽度上减少继承的container body-content的边距，但我不知道如何通过CSS来实现。

从下面的截图中可以看到，删除山坳被切断，尽管有大量的表的空白凋侧的扩大：

问：

如何增加最大宽度的Bootstrap容器的宽度？

吉斯特表容器标记：

<div class="container"> 


    <div class="form-group"> 
     <div class="table-responsive"> 
      <div class="table-responsive" id="datatable-wrapper"> 

       <table id="escalation" class="table table-striped table-bordered" cellspacing="0"> 
        <thead> 
         <tr> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">ID</th> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Application</th> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">UID</th> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Type</th> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Status</th> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Statement</th> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Created</th> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Updated</th> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Last Update</th> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Next Update</th> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Root Cause</th> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Details</th> 
          <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Delete</th> 
         </tr> 
        </thead> 
        <tbody> 
         @foreach (HP.ESCALATION.Web.Models.Escalation item in Model) 
         { 

          <tr> 
           <td>@item.ID</td> 
           <td>@item.Application</td> 
           <td class="td-limit">@item.EM</td> 
           <td class="td-limit">@item.Event</td> 
           <td class="td-limit">@item.status</td> 
           <td class="td-limit">@item.Statement</td> 
           <td class="td-limit">@item.Created</td> 
           <td class="td-limit">@item.Updated</td> 
           <td data-order="@item.UnixTimeStamp" class="td-limit">@item.UpdatedTime</td> 
           <td class="td-limit">@item.NextUpdate</td> 
           <td class="td-limit">@item.RootCause</td> 
           @* Add CRUD buttons to each table row --> *@ 
           <td><button type="submit" style="background-color: #0CA281;" class="btn btn-success details">Details</button></td> 
           <td><button type="submit" class="btn btn-danger delete">Delete</button></td> 
          </tr> 

         } 


        </tbody> 
       </table> 




      </div> 
     </div> 
    </div> 
</div>

布局容器的要点：

<div class="container body-content" style="margin-top: 90px; margin-bottom: 70px;"> 

       @* Main Content Render *@ 
       <div id="content"> 
        <div class="content-wrapper main-content clear-fix"> 

        </div> 
        @RenderSection("featured", required: false) 
        <section class="content-wrapper main-content clear-fix"> 
         @RenderBody() 
        </section> 
       </div> 


      </div>

来源

2016-07-20 Brian J

你可以在这里放置一个小提琴或任何链接？ –

，在这种情况下工作，仍然允许容器来调整较小分辨率的解决方案，是利用为目标的CSS @媒体：

@media only screen and (min-width : 1200px) { 

    .container { width: 1500px; } 

}

来源

2016-07-20 12:46:10

增加容器的宽度目标容器用CSS：

.container{ 
    max-width: 1400px; //Or whatever value you need 
}

你可以使用媒体查询来指定该样式将应用的断点

来源

2016-07-20 11:38:37 JT91

一个可能的解决方案我想如果要减少继承容器正文内容的最大宽度的边距，但我不知道如何通过CSS来做到这一点。

尝试添加以下你的CSS

.container.body-content{ 
    margin-left:0; 
    margin-right:0; 
    padding-left:0; 
    padding-right:0; 
}

而不是在工作演示，以测试这个它很难判断这是否是足够好，或者如果它需要细化。

祝你好运！

来源

2016-07-20 11:43:58

您可以覆盖引导CSS，通过添加容器的CSS为

.container { width: 1400px; } 

make sure this css file is added after the bootstrap css

来源

2016-07-20 11:44:39 Manikandan

我只希望表格容器在浏览器中的最大宽度1400px上最大化。目前，当浏览器尺寸小于最大值时，此代码^不允许容器调整大小。 –

您可以设置最大宽度：1400px和宽度：100％。所以，当您的浏览器最小化时，您的宽度将根据每个调整。如果您的浏览器宽度超过1400像素，容器将不再延伸 – Manikandan

如何在最大宽度上增加Bootstrap容器的宽度？

回答

相关问题