Question

我想改变我呈现物体（身体）的区域的宽度，我添加图片以更好地理解我正在寻找的东西：

（黄色标记是我正在寻找我的HTML正文的宽度，我该怎么做？ enter image description here

我使用MVC 4 w / bootstrap。

其他信息：我有一个导航栏，要求我在＆＃39; _layout＆＃39;中添加样式配置。为了以适当的方式显示页面而不允许导航栏覆盖正文内容，请按以下步骤操作：

 <style>
        body {
            padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */

        }

        .aligntobottom {
            bottom: 0;
            position: absolute;
        }
    </style>

我需要添加到样式标记中以获得我想要的内容吗？

更新这就是我渲染正文的方式（在＆＃39; _layout＆＃39;中）：

 <div class="container">


            @if (IsSectionDefined("featured"))
            {
                <div class="hero-unit">
                    @RenderSection("featured", required: false)
                </div>
            }
            @RenderBody()


    </div> <!-- /container -->

所以它首先放在一个容器内。（我将主体渲染到容器中）

更新

**我注意到问题是因为＆＃39; @ media＆＃39; ：

但现在我看到我的CSS中有一些@media部分：

@media (min-width: 768px) {
  .container {
      width: 550px;
    /*width: 750px;*/
    /*MAYBE THIS*/
  }

@media (min-width: 992px) {
  .container {
      width: 550px;
    /*width: 970px;*/
    /*MAYBE THIS*/
  }

@media (min-width: 1200px) {
  .container {
    /*width: 1170px;*/
    width: 550px;
    /*MAYBE THIS*/
  }

为了保持所有类型的浏览器和屏幕的适用性，我需要改变什么？

我改变所有这些（1200px，992px，768px）就像我发布的代码一样，我怎么知道我目前正在使用哪一个？那么我的媒体宽度是多少？

Answer 1

无需修改CSS，只需将页面内容放在

中即可

<div class="container">
    <!-- More HTML here -->
</div>

如果你想制作更窄，你可以使用：

<div class="container">
     <div class="row">
         <div class="col-lg-offset-1 col-lg-10">
         </div>
     </div>
</div>

Answer 2

创建一个新的div，在body标签之后，将所有内容放入其中，给出宽度（例如1200px）和margin：0 auto;将它保持在屏幕的中心。

如果您使用的是bootstrap，请将所有内容放在“容器”中。

Answer 3

如果我正确阅读了您的帖子，我认为您正在努力使内容更窄，使导航栏保持全宽......然后我建议更改以下内容

<div id="navbar">
  code of the navigation bar
</div>
<div id="content" >
  content
</div>

然后将窗框改为看起来像这样

#navbar{
  width:100%;
  /*other styles*/
}
#content{
  width:920px;/*change the value to suite ur need*/
  margin:0 auto;/*this will center ur content*/
}

如果您想使导航栏的宽度与内容相同，请在内容div中添加#navbar div，如下所示：

<div id="content">
  <div id="navbar">
    code of the navigation bar
  </div>
  content
</div>

如何使HTML页面更窄？

3 个答案: