时间戳

首页 > 解决方案 > 有没有boostrap会影响对齐？

bootstrap-4 - 有没有boostrap会影响对齐？

问题描述

我在使用引导程序时遇到对齐问题。当我在下面添加两个引导程序时，菜单名称字体大小的所有标记都会变小。

 <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
 <link href="css/bootstrap-responsive.min.css" rel="stylesheet"type="text/css" />

删除两个引导代码，结果图片如下：enter image description here

当我删除两个引导程序时，菜单名称将改变原来的大小，图片和文字对齐的内容将消失。样例如下图：

在此处输入图像描述

任何人都可以指导我如何解决引导程序中的对齐问题？谢谢。

我的所有代码显示在下面：

<!DOCTYPE html>

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="font/stylesheet.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-responsive.min.css" rel="stylesheet"     type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="css/media-queries.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<meta name="viewport" content="width=device-width" />

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

<link href='http://fonts.googleapis.com/css?family=Exo:400,800' rel='stylesheet' type='text/css'>
</head>

<body data-spy="scroll">



<!-- MAIN CONTENT -->
<div class="container content container-fluid" id="home">


    <!-- HOME -->
    <div class="row-fluid">

    <!-- PHONES IMAGE FOR DESKTOP MEDIA QUERY -->
    <div class="span5 visible-desktop">
        <img src="images/Image1.png">
    </div>

    <!-- APP DETAILS -->
    <div class="span7">

        <!-- ICON -->
        <div class="visible-desktop" id="icon">
            <img src="images/sgr_mpg-footer-logo.png" style="
             height: 80px;">
        </div>

        <!-- APP NAME -->
        <div id="app-name">
            <h1>MPKlang</h1>
        </div>

        <!-- VERSION -->


        <!-- TAGLINE -->
        <div id="tagline">
            SALURAN MAKLUMAT RAKYAT MAJLIS PERBANDARAN KLANG
        </div>

        <!-- PHONES IMAGE FOR TABLET MEDIA QUERY -->
        <div class="hidden-desktop" id="phones">
            <img src="images/phones.png">
        </div>

        <!-- DESCRIPTION -->
        <div id="description">
          SMART-MPKlang merupakan satu platform digital bersepadu dalam menyalurkan maklumat dan menghubungkan majlis perbandaran klang dengan penduduk dan pihak-pihak berkepentingan (stakeholders)
        </div>

        <!-- FEATURES -->
        <ul id="features">
            <li>Kenali MPKlang</li>
            <li>Produk MPKlang</li>
            <li>Klang Bandar Diraja</li>

        </ul>

        <!-- DOWNLOAD & REQUIREMENT BOX -->
        <div class="download-box">
            <a href="#"><img src="images/black.png"></a>
        </div>


        </div>
    </div>
<br><br>
<!-- FOOTER -->
<div class="footer container container-fluid">

    <!-- COPYRIGHT - EDIT HOWEVER YOU WANT! -->
    <div id="copyright" style="font-size: 11px;">
    <b>HUBUNGI KAMI | TERMA & SYARAT | PENAFIAN | CARIAN | ADMIN</b>

    </div>

    <!-- CREDIT - PLEASE LEAVE THIS LINK! -->
    <div id="credits">
    Copyright &copy; HAK CIPTA TERPELIHARA JABATAN TEKNOLOGI MAKLUMAT MAJLIS         PERBANDARAN KLANG<br>
    </div>

</div>

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script src="js/init.js"></script><!DOCTYPE html>

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="font/stylesheet.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="css/media-queries.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<meta name="viewport" content="width=device-width" />

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

<link href='http://fonts.googleapis.com/css?family=Exo:400,800' rel='stylesheet' type='text/css'>
</head>

<body data-spy="scroll">



<!-- MAIN CONTENT -->
<div class="container content container-fluid" id="home">



<!-- HOME -->
<div class="row-fluid">

    <!-- PHONES IMAGE FOR DESKTOP MEDIA QUERY -->
    <div class="span5 visible-desktop">
        <img src="images/Image1.png">
    </div>

    <!-- APP DETAILS -->
    <div class="span7">

        <!-- ICON -->
        <div class="visible-desktop" id="icon">
            <img src="images/sgr_mpg-footer-logo.png" style="
             height: 80px;">
        </div>

        <!-- APP NAME -->
        <div id="app-name">
            <h1>MPKlang</h1>
        </div>

        <!-- VERSION -->


        <!-- TAGLINE -->
        <div id="tagline">
            SALURAN MAKLUMAT RAKYAT MAJLIS PERBANDARAN KLANG
        </div>

        <!-- PHONES IMAGE FOR TABLET MEDIA QUERY -->
        <div class="hidden-desktop" id="phones">
            <img src="images/phones.png">
        </div>

        <!-- DESCRIPTION -->
        <div id="description">
          SMART-MPKlang merupakan satu platform digital bersepadu dalam menyalurkan maklumat dan menghubungkan majlis perbandaran klang dengan penduduk dan pihak-pihak berkepentingan (stakeholders)
        </div>

        <!-- FEATURES -->
        <ul id="features">
            <li>Kenali MPKlang</li>
            <li>Produk MPKlang</li>
            <li>Klang Bandar Diraja</li>

        </ul>

        <!-- DOWNLOAD & REQUIREMENT BOX -->
        <div class="download-box">
            <a href="#"><img src="images/black.png"></a>
        </div>


    </div>
    </div>
<br><br>
<!-- FOOTER -->
<div class="footer container container-fluid">

<!-- COPYRIGHT - EDIT HOWEVER YOU WANT! -->
<div id="copyright" style="font-size: 11px;">
    <b>HUBUNGI KAMI | TERMA & SYARAT | PENAFIAN | CARIAN | ADMIN</b>

</div>

<!-- CREDIT - PLEASE LEAVE THIS LINK! -->
<div id="credits">
    Copyright &copy; HAK CIPTA TERPELIHARA JABATAN TEKNOLOGI MAKLUMAT MAJLIS PERBANDARAN KLANG<br>
</div>

</div>

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script src="js/init.js"></script>

标签： bootstrap-4

解决方案

推荐阅读