GVKun编程网logo

100％宽度的Twitter Bootstrap 3模板（twitter-bootstrap）

21

在这篇文章中，我们将为您详细介绍100％宽度的TwitterBootstrap3模板的内容，并且讨论关于twitter-bootstrap的相关问题。此外，我们还会涉及一些关于css–Bootstra

在这篇文章中，我们将为您详细介绍100％宽度的Twitter Bootstrap 3模板的内容，并且讨论关于twitter-bootstrap的相关问题。此外，我们还会涉及一些关于css – Bootstrap输入的父容器的完全100％宽度？、css – Twitter Bootstrap – 100％身高、css – Twitter Bootstrap：div在容器与100％的高度、html – Bootstrap导航栏100％宽度不起作用的知识，以帮助您更全面地了解这个主题。

本文目录一览：

100％宽度的Twitter Bootstrap 3模板（twitter-bootstrap）

100％宽度的Twitter Bootstrap 3模板（twitter-bootstrap）

我是一个Bootstrap新手，我有一个100％宽的模板，希望使用Bootstrap进行编码。第一列从左上角开始，我在Google地图上将拉伸范围扩展到最右边。我以为我可以在container-fluid课堂上做到这一点，但这似乎不再可用。我不知道如何使用bootstrap 3来实现该布局。我正在使用themeforest中的Geometry
PSD模板

答案1

小编典典

对于Bootstrap 3，您将需要使用自定义包装并将其宽度设置为100％。

.container-full {  margin: 0 auto;  width: 100%;}

这是Bootply上的工作示例

如果您不想添加自定义类，则可以通过将所有内容包装在col-lg-12宽布局演示]）中来实现非常宽的布局（而不是100％）

Bootstrap 3.1的更新

container-fluid类中引导3.1已返回，所以这可以被用来创建一个完整的宽度的布局（没有额外的CSS需要）..

css – Bootstrap输入的父容器的完全100％宽度？

css – Bootstrap输入的父容器的完全100％宽度？

如何使Bootstrap输入字段与其父字段完全相同的100％？

正如steve-obrien在Bootstrap Issue #1058写道：

Setting to 100% does not work when applied directly to an input field as it does not take in to account the padding. So you end up with 100% of the container plus the padding on the input Box,so the input Box usually breaks outside its container.

这张票提供了各种解决方案，但我正在寻找最好的方法 – 最好是一个CSS类已经提供的Bootstrap。

解决方法

应用输入块级类对我来说非常适合，跨越不同的屏幕宽度。它由 Bootstrap in mixins.less定义如下： 
// Block level inputs
.input-block-level {
  display: block;
  width: 100%;
  min-height: 28px;        // Make inputs at least the height of their button counterpart
  .Box-sizing(border-Box); // Makes inputs behave like true block-level elements
}

这与his comment on issue #1058年的“assembler”建议的风格非常相似。

css – Twitter Bootstrap – 100％身高

css – Twitter Bootstrap – 100％身高

我正在尝试使用twitter-bootstrap框架为我的应用程序设计一个管理面板,但是我无法让我的布局工作.

我受到这种设计的启发：
这将是一个两列布局“边栏”和“主要内容”,但我无法获得100％的高度工作.我设法得到2列布局与100％的宽度使用这个代码：

HTML

<div>
 <div>


   <div>
     <!--Sidebar content-->Sidebar
   </div>


   <div>
     <!--Body content-->Main
   </div>


 </div> 
</div>

CSS

/* Global */
html,body {
    color: #6B787F;
    padding: 0;
    height: 100%;
    background: #11161a;
    font-family: 'PT Sans' !important;
}

.colorize-white {
    background: #FFFFFF;
}

.no-margin {
    margin: 0;
}

我在那里的一半,但有两件事情我无法解决.
1)100％高度
2)摆脱第二张图像上的外边缘

您可以看到我在浏览器边框和Sidebar / Main元素之间有余量,然后在两者之间保留余量.我需要摆脱这个,如果我添加没有边缘的所有我的元素在HTML我粘贴包括身体标签我仍然没有得到100％的高度,我仍然无法摆脱浏览器边框和边栏和主要内容之间的边距,边栏和主要内容之间的边距空间消失.

解决方法

我不太确定Bootstrap的网格模型是你在这里寻找的.你可能会寻找绝对的定位.例如： 
#sidebar,#content {
    position: absolute;
    top: 0;
    bottom: 0;
}
#sidebar { left: 0; width: 10em; }
#content { left: 10em; right: 0; }

Try it out.

css – Twitter Bootstrap：div在容器与100％的高度

css – Twitter Bootstrap：div在容器与100％的高度

使用twitter bootstrap(2)，我有一个简单的页面与导航栏，在容器内我想添加一个100％的高度的div(到屏幕的底部)。我的css-fu是生锈的，我不能工作这出来。

简单HTML：

<body>
  <div>
   <!-- Rest of nav bar chopped from here -->
  </div>
  <div>
    <div id="map"></div> <!-- This one wants to be 100% height -->
  </div>
</body>

当前CSS：

#map {
    width: 100%;
    height: 100%;
    min-height: 100%;
}

html,body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}

>编辑*

我已经添加了填充类的高度如下所示。但是，问题是，我添加一个padding-top到身体，以解决顶部的固定导航栏。这会影响“地图”div的100％高度，意味着滚动条被添加 – 如所示：http://jsfiddle.net/S3Gvf/2/任何人都可以告诉我如何解决？

解决方法

将类.fill设置为height：100％ 
.fill { 
    min-height: 100%;
    height: 100%;
}

JSFiddle

(我把#map的红色背景，所以你可以看到它占据100％的高度)

html – Bootstrap导航栏100％宽度不起作用

html – Bootstrap导航栏100％宽度不起作用

在我的bootstrap导航栏上,即使导航栏位于图像顶部,我也试图在页面上进行完整操作.

但我已尝试在.navbar-wrapper和navbar以及navbar-default上宽度100％.但由于某种原因,导航栏仍然不会达到页面的整个宽度.

实例

这是我的codepen Code View

这是我的codepen Full View

问题如何使导航栏宽度100％工作,使其达到页面的整个宽度？

CSS

/* Special class on .container surrounding .navbar,used for positioning it into place. */
.navbar-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    left: 0;
    z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
    padding-right: 0;
    padding-left: 0;
}

.navbar-wrapper .navbar {
    padding-right: 15px;
    padding-left: 15px;
    width: 100% !important;
}

.navbar-inverse {
  width: 100% !important;
    background-color: rgba(0,0.5) !important;
}

.navbar-inverse .nav > li > a {
    color: #FFFFFF;
}

.navbar-inverse .nav > li > a:hover {
    background: none;
}

.navbar-brand a {
    color: #FFFFFF;
}

.main-header-background {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center; 
    background-image: url('./images/stars/img-stars-2.jpg');
    height: 620px;
    width: 100%;
    margin-bottom: 60px;
}

HTML

<div>
<div>

<nav>
<!-- Brand and toggle get grouped for better mobile display -->
<div>
<button type="button"data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span>Toggle navigation</span>
<span></span>
<span></span>
<span></span>
</button>
<div>
<a href="#">Brand</a>
</div>
</div>

<!-- Collect the nav links,forms,and other content for toggling -->
<divid="bs-example-navbar-collapse-1">

<ul>
<li><a href="#">Link <span>(current)</span></a></li>
<li><a href="#">Link</a></li>
<li>
<a href="#"data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span></span></a>
<ulrole="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li></li>
<li><a href="#">Separated link</a></li>
<li></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>

<ul>
<li><a href="#">Link</a></li>
<li>
<a href="#"data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span></span></a>
<ulrole="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>

</div><!-- /.navbar-collapse -->
</nav>
</div>
</div>

<div>
</div>

解决方法

您可以通过使容器继承自“.navbar-wrapper”来使导航栏的宽度达到页面的整个长度.您可能还想删除“.navbar-wrapper .navbar”中设置的填充.

以下样式适合我：
见codpen：http://codepen.io/JordanLittell/pen/wadWxv

/ *围绕.navbar的.container上的特殊类,用于将其定位到位. * /

.navbar-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    left: 0;
    z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
    padding-right: 0;
    padding-left: 0;
    width: inherit;
}

.navbar-wrapper .navbar {
    width: 100% !important;
}

.navbar-inverse {
  width: 100% !important;
    background-color: rgba(0,0.5) !important;
  border-radius: 0;
}

.navbar-inverse .nav > li > a {
    color: #FFFFFF;
}

.navbar-inverse .nav > li > a:hover {
    background: none;
}

.navbar-brand a {
    color: #FFFFFF;
}

.main-header-background {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center; 
    background-image: url('http://www.riwakawebsitedesigns.com/external/images/stars/img-stars-2.jpg');
  height: 620px;
  width: 100%;
  margin-bottom: 60px;
}

关于100％宽度的Twitter Bootstrap 3模板和twitter-bootstrap的问题我们已经讲解完毕，感谢您的阅读，如果还想了解更多关于css – Bootstrap输入的父容器的完全100％宽度？、css – Twitter Bootstrap – 100％身高、css – Twitter Bootstrap：div在容器与100％的高度、html – Bootstrap导航栏100％宽度不起作用等相关内容，可以在本站寻找。

本文标签：

上一篇从Pandas Dataframe单元格中将嵌套数组值拆分为多行（pandas dataframe 按列合并）

下一篇ValueError：功能不在功能字典中（在功能权限字典中）

相关文章