如何在最大寬度上增加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容器的寬度？

回答

相關問題