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

在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>

9 个解决方案

#1

可以参考http://blog.sina.com.cn/s/blog_58c23dea01009ow1.html

#2

引用 1 楼 qiubin200236 的回复:

可以参考http://blog.sina.com.cn/s/blog_58c23dea01009ow1.html

我直接使用的是bootstrap

#3

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

#4

引用 2 楼 ahking 的回复:

Quote: 引用 1 楼 qiubin200236 的回复:

可以参考http://blog.sina.com.cn/s/blog_58c23dea01009ow1.html

我直接使用的是bootstrap

那就需要指定div的class

#5

引用楼主 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

#6

引用 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

bootstarp应该有相关设置了，但是在设计器中没有显示正确结果，我就是想让其在设计器中让其正确显示，以便于开发

#7

引用 3 楼 oicq362934348 的回复:

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

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

#8

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

#9

该回复于2013-07-29 09:13:57被管理员删除

#1

可以参考http://blog.sina.com.cn/s/blog_58c23dea01009ow1.html

#2

引用 1 楼 qiubin200236 的回复:

可以参考http://blog.sina.com.cn/s/blog_58c23dea01009ow1.html

我直接使用的是bootstrap

#3

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

#4

引用 2 楼 ahking 的回复:

Quote: 引用 1 楼 qiubin200236 的回复:

可以参考http://blog.sina.com.cn/s/blog_58c23dea01009ow1.html

我直接使用的是bootstrap

那就需要指定div的class

#5

引用楼主 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

#6

引用 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

bootstarp应该有相关设置了，但是在设计器中没有显示正确结果，我就是想让其在设计器中让其正确显示，以便于开发

#7

引用 3 楼 oicq362934348 的回复:

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

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

#8

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

#9

该回复于2013-07-29 09:13:57被管理员删除

秒客网

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

9 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#1

#2

#3

#4

#5

#6

#7

#8

#9

相关文章