发表新帖
发表新帖

Bootstrap 3: How to set default grid to 960px width?

前端 未结
关注
4 582
刺人心
刺人心 2021-02-02 00:36

I\'m working with Bootstrap 3 and the client wants the website container width to be set to 960px. Do I directly edit the CSS file or what is the best way to do this? I heard so

相关标签:
4条回答
  • -上瘾入骨i
    2021-02-02 00:53

    The easiest way is to wrap everything in a container like this..

    .container-fixed {
  margin: 0 auto;
  max-width: 960px;
}

    http://bootply.com/94943

    Or, you can go with LESS/custom build: http://getbootstrap.com/customize/

    0 讨论(0)
  • 抹茶落季
    2021-02-02 01:01

    Bootstraps gridsystem is FLUID. This means it works in percentages.

    So just set a width to page wrapper, and you are ready to go

    HTML:

    <body>
    <div class="page-wrapper">
        <!-- Your bootstrap grid/page markup here -->
    </div>
</body>

    CSS:

    .page-wrapper {
    width: 960px; /* Your page width */
    margin: 0 auto; /* To center your page within the body */
}
    0 讨论(0)
  • 故里飘歌
    2021-02-02 01:14

    For Bootstrap3, you can customize it to get 960px by default (http://getbootstrap.com/customize/)

    1. change @container-large-desktop from ((1140px + @grid-gutter-width)) to ((940px + @grid-gutter-width)).
    2. change @grid-gutter-width from 30px to 20px.

    then download your custom version of bootstrap and use it. It should be 960px by default now.

    0 讨论(0)
  • 旧巷少年郎
    2021-02-02 01:15

    I wanted the max width to be 810px, so I used a media query like this:

    @media (min-width: 811px) {    
    .container{
        width:810px;
    }
}
    0 讨论(0)
 看不清?
提交回复
热议问题