发表新帖
发表新帖

Fluid Container in Bootstrap 3

前端 未结
关注
5 1085
我寻月下人不归
我寻月下人不归 2020-12-12 21:03

How to make fluid container in bootstrap 3?

In bootstrap 2.3.2 .container-fluid class is there. But now in bootstrap 3 it is missing and there is only <

相关标签:
5条回答
  • 鱼传尺愫
    2020-12-12 21:31

    I simply setup the following CSS rule where any row that is a child of container-fluid will no longer have a negative margin that offsets the grid system.

    .container-fluid > .row {
    margin-left: 0;
}

    I will test further to see if this creates any issues with other fixed width grid layouts.

    0 讨论(0)
  • 旧时难觅i
    2020-12-12 21:32

    There are good answers here, so I will try to avoid my self repeating with my following points on the subject:

    1. .container-fluid was removed in 3.0 but now it's back in 3.4 (this info is in reply but I wanted to put it on answer)
    2. To get latest version go here or use Nuget.
    3. Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
    4. For latest info on Container please go here for Bootstrap CSS
    0 讨论(0)
  • 慢半拍i
    2020-12-12 21:36

    This was introduced in v3.1.0: http://getbootstrap.com/css/#grid-example-fluid

    Commit #62736046 added ".container-fluid variation for full-width containers and layouts".

    0 讨论(0)
  • 囚心锁ツ
    2020-12-12 21:37

    Bootstrap 3.0 moved to a "mobile first" approach. .container is really only there in instances where you need/want a boxy layout. but, if you exempt the div.container-fluid entirely, you're left with a fluid layout by default.

    for example, to have a two-column fluid layout, simply use:

    <body>
  <header>...</header>
  <div style="padding:0 15px;"><!-- offset row negative padding -->
    <div class="row">
      <div class="col-md-6">50%</div>
      <div class="col-md-6">50%</div>
    </div>
  </div>
  <footer>...</footer>
</body>
    0 讨论(0)
  • 小蘑菇
    2020-12-12 21:45

    The 2.x .container-fluid was replaced by .container in Bootstrap 3.x (http://getbootstrap.com/getting-started/#migration), so the .container is fluid, but it's not full width.

    You can use the row as a fluid container, but you must tweak it a little to avoid a horizontal scroll bar. Excerpt from the docs (http://getbootstrap.com/css/#grid)..

    "Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with padding: 0 15px; to offset the margin: 0 -15px; used on .rows."

    More on changes in 3.x: http://bootply.com/bootstrap-3-migration-guide

    Demo: http://bootply.com/91948

    UPDATE for Bootstrap 3.1

    container-fluid has returned again in Bootstrap 3.1. Now container-fluid can be used to create a full width layout: http://www.bootply.com/116382

    0 讨论(0)
 看不清?
提交回复
热议问题