web-dev-qa-db-ja.com

最大幅でBootstrapコンテナの幅を増やす方法は？

タイプ=コンテナのBootstrap div内に DataTable を配置しました。ブラウザの最大幅でウェブサイトを実行すると、テーブルのコンテナがスクロールバーを追加してカットします表の最後の列から。

推奨されるcontainer-fluid divタイプを使用しようとしました here がこれにより、テーブルのコンテナーの幅がさらに狭くなります。

要素を検査すると、レイアウトページを継承するcontainer body-contentの周囲で、テーブルコンテナーの左側と右側にマージンが追加されているようです：

enter image description here

最大幅で継承されたcontainer body-contentのマージンを減らすかどうか考えている解決策の1つですが、CSSでそれを行う方法がわかりません。

以下のスクリーンショットから、テーブルの拡大する側に空白がたくさんあるにもかかわらず、削除列が切り取られていることがわかります。

enter image description here

質問：

最大幅で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>
htmlcsstwitter-bootstrapcontainerscontentsize
9
Brian J

この場合に機能し、さらに小さな解像度でコンテナのサイズを変更できるソリューションは、@ mediaを使用してCSSをターゲットにすることでした。

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

    .container { width: 1500px; } 

}
7
Brian J

上記の答えはどれも良い解決策ではありません。新しい_project_variables.scssを作成してブートストラップの変数を簡単に変更し、メインのscssファイルのbootstrapの前にインポートすることができます。次に例を示します。

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
        sm: 540px,
        md: 720px,
        lg: 960px,
        xl: 1280px
) !default;
15
Keith Mifsud

Bootstrap 4使用：

@media only screen and (min-width : 1200px) {
    .container { max-width: 1500px; }
}
5
Keith Turkowski

特大の画面でも使用できるようにするため、以下を追加しました。

/* large devices */
@media (min-width: 1200px) {
  .container {
     max-width: 1200px;
   }
}
/* extra large devices */
@media screen and (min-width: 1800px) {
  .container {
    max-width: 1800px;
  }
}
2
il0v3d0g

bootstrap cssをオーバーライドするには、次のようにコンテナのcssを追加します。

.container { width: 1400px; } 

make sure this css file is added after the bootstrap css
1
Manikandan

コンテナーの幅を増やすには、cssを使用してコンテナーをターゲットにします。

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

メディアクエリを使用して、このスタイルが適用されるブレークポイントを指定することもできます

1
JT91

最大幅で継承されたコンテナーのbody-contentのマージンを減らすかどうかを考えている解決策の1つですが、CSSでそれを行う方法がわかりません。

CSSに以下を追加してみてください

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

これをテストするための実用的なデモがないと、これで十分かどうか、または改良が必要かどうかを判断するのは困難です。

幸運を！

0
David Taiaroa

これによると： " https://developer.mozilla.org/en-US/docs/Web/CSS/max-width "-"none"が利用可能であり、Bootstrapうまくいくと思います：

@media only screen and (min-width : 1200px) {
    .container { max-width: none; }
}
0
gene