在vs2010设计器中看到bootstrap布局效果和浏览器中看到不一样，怎么解决呢

ahking 2013-07-26 04:54:21

在vs2010设计器中看到bootstrap布局效果和浏览器中看到不一样，如图：

实际应该在一行上

代码如下：



<!DOCTYPE html>

<html>

<head>

    <title>Bootstrap 101 Template</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap -->

    <link href="Styles/bootstrap.min.css" rel="stylesheet" media="screen">

    <script src="Scripts/jquery-1.8.3.min.js"></script>

    <script src="Scripts/bootstrap.min.js"></script>

</head>

<body>

    <div class="container-fluid">

        <div class="row-fluid">

            <div class="span2" style="background-color:Blue;">              

                aaaaaaaa</div>

            <div class="span10" style="background-color:Fuchsia;">           

                bbbbbbbbbbbbbbb</div>

        </div>

    </div>

</body>

</html>

...全文

246 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

ahking 2013-07-26

打赏
举报

难道没人用过bootstap么，其宽度是940px；12栅格

_Kmi 2013-07-26

打赏
举报

引用 3 楼 oicq362934348 的回复:

以浏览器效果为准，编辑器里面看起来没有问题，不一定浏览就没问题了。

先要div设置宽度，然后float:left;div默认是100%宽的

ahking 2013-07-26

打赏
举报

引用 5 楼 liang_show 的回复:

[quote=引用楼主 ahking 的回复:] 在vs2010设计器中看到bootstrap布局效果和浏览器中看到不一样，如图：

实际应该在一行上代码如下：


<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="Styles/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="Scripts/jquery-1.8.3.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span2" style="background-color:Blue;">              
                aaaaaaaa</div>
            <div class="span10" style="background-color:Fuchsia;">           
                bbbbbbbbbbbbbbb</div>
        </div>
    </div>
</body>
</html>

span2 span10这两个样式中加上 float:left[/quote] bootstarp应该有相关设置了，但是在设计器中没有显示正确结果，我就是想让其在设计器中让其正确显示，以便于开发

掌握永恒需控制现在 2013-07-26

打赏
举报

引用楼主 ahking 的回复:

在vs2010设计器中看到bootstrap布局效果和浏览器中看到不一样，如图：

实际应该在一行上代码如下：


<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="Styles/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="Scripts/jquery-1.8.3.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span2" style="background-color:Blue;">              
                aaaaaaaa</div>
            <div class="span10" style="background-color:Fuchsia;">           
                bbbbbbbbbbbbbbb</div>
        </div>
    </div>
</body>
</html>

span2 span10这两个样式中加上 float:left