bootstrap 无法在 Visual Studio 中正常工作 [英] bootstrap not working properly with visual studio

查看：59
本文介绍了bootstrap 无法在 Visual Studio 中正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在 Visual Studio 中使用引导程序时遇到对齐问题，特别是引导程序列.当我将 div 与 col-md-4 类一起使用时，它只会自动向右移动一些空间而不正确对齐......但是当代码在记事本++中编写时并另存为 .html 文件，它可以正常工作...帮我找出visual studio2013到底有什么问题

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestForm.aspx.cs"Inherits="WebApplication1.Pages.TestForm" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="服务器"><link href="../css/bootstrap.css" rel="stylesheet"/><title></title><身体><form id="form1" runat="server"><div class="容器"><div class="jumbotron no-Margin"><p>H5BP 包含许多最佳实践或初始 HTML 的常见内容模板，更像是通用的默认"您将用作服务器端全局模板template.Bootstrap 不提供类似的东西这(也不需要或旨在).所以在这个考虑到，H5BP 非常适合包含 HTML来自其他任何地方的组件(例如来自引导程序).</p>

<div class="容器"><div class="col-md-4"><p>H5BP 包含许多最佳实践或初始 HTML 的常见内容模板，更像是通用的默认"您将用作服务器端全局模板template.Bootstrap 不提供类似的东西这(也不需要或旨在).所以在这个考虑到，H5BP 非常适合包含 HTML来自其他任何地方的组件(例如来自引导程序)</p>

<div class="col-md-4"><p>H5BP 包含许多最佳实践或初始 HTML 的常见内容模板，更像是通用的默认"您将用作服务器端全局模板template.Bootstrap 不提供类似的东西这(也不需要或旨在).所以在这个关于，H5BP 非常适合包含 HTML来自其他任何地方的组件(例如来自引导程序)</p>

<div class="col-md-4"><p>H5BP 包含许多最佳实践或初始 HTML 的常见内容模板，更像是通用的默认"您将用作服务器端全局模板模板.</p>

<script src="../js/jquery-1.12.1.min.js"></script><script src="../js/bootstrap.min.js"></script></表单></html>

浏览器视图如下图所示使用visual studio时显示列对齐错误的图像使用记事本++时显示列正确对齐的图像

解决方案

我最好的猜测是您的样式表未加载.你确定../css/bootstrap.css"是正确的路径吗?您正在向下移动一级到本地主机，然后查找文件夹 css

按 F12 打开开发者控制台，移动到时间线选项卡并检查您的 css 文件的请求.

Visual Studio 对您的 css 没有其他魔法！

i am getting alignment problem while using bootstrap in visual studio specifically with bootstrap columns. when i using div with class col-md-4 it just automatically moves some space right and not align properly...... but when the code is writing in notepad++ and and save as .html file it works correctly... help me to find out what exactly problem with visual studio2013 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestForm.aspx.cs"
Inherits="WebApplication1.Pages.TestForm" %>

<!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server">
            <link href="../css/bootstrap.css" rel="stylesheet" />
            <title></title>
        </head>
        <body>
            <form id="form1" runat="server">
                <div class="container">
                    <div class="jumbotron no-Margin">
                        <p>H5BP contains a number of best practices or
                           common inclusions for your initial HTML 
                           template,which is more like the generic "default" 
                           template you would use as server-side global  
                           template.Bootstrap does not provide anything like
                           this(nor does it need or aim to). So in this 
                           regard,H5BP is perfectly suited to including HTML
                           components from anywhere else (e.g. those from
                           Bootstrap).
                        </p>
                    </div>
                </div>
                <div class="container">
                    <div class="col-md-4">
                        <p>H5BP contains a number of best practices or
                           common inclusions for your initial HTML
                           template,which is more like the generic "default"
                           template you would use as server-side global 
                           template.Bootstrap does not provide anything like
                           this (nor does it need or aim to). So in this
                           regard,H5BP is perfectly suited to including HTML
                           components from anywhere else (e.g. those from
                           Bootstrap)
                        </p>
                    </div>
                    <div class="col-md-4">
                        <p>H5BP contains a number of best practices or
                           common inclusions for your initial HTML
                           template,which is more like the generic "default"
                           template you would use as server-side global  
                           template.Bootstrap does not provide anything like
                           this (nor does it need or aim to). So in this
                           regard,H5BP is perfectl suited to including HTML
                           components from anywhere else (e.g. those from
                           Bootstrap)
                        </p>
                    </div>
                    <div class="col-md-4">
                        <p>H5BP contains a number of best practices or
                           common inclusions for your initial HTML
                           template,which is more like the generic "default"
                           template you would use as server-side global
                           template.
                        </p>
                    </div>
                </div>
                <script src="../js/jquery-1.12.1.min.js"></script>
                <script src="../js/bootstrap.min.js"></script>
            </form>
        </body>
    </html>

browser view are given as images below image showing columns alignment error when using visual studio image showing columns align properly when using notepad++

解决方案

My best guess is that your stylesheet is not loaded. are you sure "../css/bootstrap.css" is the right path? you are moving one level down to localhost and then looking for the folder css

Open the developer console by hitting F12, move to the timeline tab and inspect the request of your css file.

There is no other magic that Visual Studio does to your css!

这篇关于bootstrap 无法在 Visual Studio 中正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆