所以我正在使用Twitter的Bootstrap创建一个带有标签内容的页面,但我的开始活动div的内容总是与我的其他标签的内容不同.例如,我在不同的选项卡中使用highcharts.js放入图表,但活动的一个总是正确显示而其他的宽度不正确.
看看下面的例子:
<div class = "row-fluid">
<div class = "span9">
<div class = "row-fluid">
<h3>Test</h3>
<ul class="nav nav-tabs">
<li class = "active">
<a data-toggle = "tab" href = "#one">One</a>
</li>
<li><a data-toggle = "tab" href = "#two">Two</a></li>
<li><a data-toggle = "tab" href = "#three">Three</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="one" >
<h4>One</h4>
<div id = "container1"></div>
<script type = "text/javascript">
$(function () {
$('#container1').highcharts({
chart: {
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', …Run Code Online (Sandbox Code Playgroud) 我正在使用Highcharts柱形图,我希望它是100%宽度响应图表.容器很简单<div>,没有任何格式.加载文档时,图表的宽度始终固定为600x400px.如果我调整窗口大小或切换到另一个浏览器选项卡,图表将填充宽度并成为响应全宽图表,就像我想要的那样.如果我重新加载页面,它再次固定宽度.我尝试将宽度设置为容器和图表,但是没有任何帮助.如果我将容器div移动到父div之上一级,它就可以工作.如何使图表在页面加载时变为全宽?
谢谢