bootstrap not working properly with visual studio

2019-09-09 22:33发布

问题:

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

回答1:

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!