Html 集装箱宽度问题_Html_Css_Twitter Bootstrap_Twitter Bootstrap 3

Html 集装箱宽度问题

html css twitter-bootstrap twitter-bootstrap-3

Html 集装箱宽度问题,html,css,twitter-bootstrap,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,我有一个固定的标题和右边的260px。我有三列，高度为100%。内容区是一个12列宽的流体容器 <div class="header"></div> <div class="secondary-aside"></div> <div class="container"> <div class="row"> <div class="col-sm-4"></div> <

我有一个固定的标题和右边的260px。我有

三列

，高度为100%。

内容区是一个12列宽的流体容器

<div class="header"></div>
<div class="secondary-aside"></div>
<div class="container">
    <div class="row">
      <div class="col-sm-4"></div>
      <div class="col-sm-4"></div>
      <div class="col-sm-4"></div>
    </div>
</div>

下面是我正在做的小提琴。cols的宽度与布局不符

我不太明白；您希望容器是流体，但容器中有固定宽度的列

你可以这样做：

<div class="header"></div>
<div class="container">
    <div class="secondary-aside"></div>
    <div class="content">
      <div class="col-sm-4"></div>
      <div class="col-sm-4"></div>
      <div class="col-sm-4"></div>
    </div>
</div>

这会有帮助吗？

不太清楚你所说的cols的宽度是什么意思，因为它与布局不符

试着这样做：

html, body, .container {
    height:100%;
    width:100%; /*keep html and body 100% */
    margin:0;
    background:lightgray
}
.container {
    display:table;
    width:calc(100% - 260px);/*keep container 100% - 260px */
    border-spacing:0.5em;
}

我不明白你为什么在BS中使用这么多自定义样式。在

http://www.responsinator.com/

看看这个

<html>
<head>
    <title></title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<style>
    .secondary-aside {
        width: 25%;
        float: right;
        background: #000000;
        height: 100%;
    }
</style>

</head>
<body>
<div class="container-fluid">
<div class="header">i am the header</div>
<div class="secondary-aside col-sm-4">ff</div>
<div class="col-sm-8">
        <div class="col-sm-4" style="background-color: red">r</div>
        <div class="col-sm-4"style="background-color: green">g</div>
        <div class="col-sm-4"style="background-color: blue">b</div>
</div>
</div>
</body>
</html>


.第二{
宽度：25%；
浮动：对；
背景：#000000；
身高：100%；
}
我是头球
ff
R
G
B

这有帮助吗？-当然不是……BS不需要你设计这么多定制CSS！！：）@弗兰克，把这个加到代码笔的顶端，我忘了复制/粘贴：html，body{height:100%；}设置html和body-to-height:100%就可以了。

<html>
<head>
    <title></title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<style>
    .secondary-aside {
        width: 25%;
        float: right;
        background: #000000;
        height: 100%;
    }
</style>

</head>
<body>
<div class="container-fluid">
<div class="header">i am the header</div>
<div class="secondary-aside col-sm-4">ff</div>
<div class="col-sm-8">
        <div class="col-sm-4" style="background-color: red">r</div>
        <div class="col-sm-4"style="background-color: green">g</div>
        <div class="col-sm-4"style="background-color: blue">b</div>
</div>
</div>
</body>
</html>