个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
32
4
我在 Bootstrap 中的一个元素中遇到了一个小问题。我有两个代码相同的文件:ctr+a 从原始文件中选择所有代码，ctrl+c 复制它，然后 ctrl+v 将它粘贴到第二个文件中。
我目前正在使用 Bootstrap 3。
结果是这样的:
原始文件在图像的下半部分，副本在上半部分。这两个文件都在同一个目录中。代码是这样的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- <link rel="shortcut icon" href="../../assets/ico/favicon.png"> -->
<title>Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/mainhardt.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<!-- Static navbar -->
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Associació d'Amics de Mainhardt</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Inici</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Publicacions <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Revistes</a></li>
<li><a href="#">Llibres</a></li>
</ul>
</li>
<li><a href="#">Intercanvi</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Jornades d'Estudis Gaspatxers <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">I Jornades "El Carlisme a les nostres terres"</a></li>
<li><a href="#">II Jornades "Memòries al voltant d'una guerra"</a></li>
<li><a href="#">III Jornades "Retalls de cultura popular"</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Gent d'ací <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Carme Vidal</a></li>
<li><a href="#">Jorge Julve</a></li>
<li><a href="#">Mar de fons</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Exposicions <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Eclipse 1905</a></li>
<li><a href="#">Cara a cara (Carme Vidal & Joan Sanz)</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron" style="background-color: #E3F6CE;">
<img class="img-responsive" src="img/LOGO GRANDE.png"/>
</div>
<!-- Carousel -->
<!-- consult Bootstrap docs at
http://twitter.github.com/bootstrap/javascript.html#carousel -->
<div id="this-carousel-id" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<a href="http://hubblesite.org/gallery/album/entire/pr2006046a/xlarge_web/npp/128/">
<img class="imagen-slider" src="img/slider/desembre2009.jpg" alt="Antennae Galaxies" />
</a>
<div class="carousel-caption">
<p>The Antennae Galaxies</p>
<p><a href="http://hubblesite.org/gallery/album/entire/pr2006046a/xlarge_web/npp/128/">Hubblesite.org »</a></p>
</div>
</div>
<div class="item">
<a href="http://hubblesite.org/gallery/album/entire/pr2007016e/xlarge_web/npp/128/">
<img class="imagen-slider" src="img/slider/abril2010.jpg" alt="Carina Caterpillar" />
</a>
<div class="carousel-caption">
<p>Carina Nebula: The Caterpillar</p>
<p><a href="http://hubblesite.org/gallery/album/entire/pr2007016e/xlarge_web/npp/128/">Hubblesite.org »</a></p>
</div>
</div>
<div class="item">
<a href="http://hubblesite.org/gallery/album/entire/pr2003010i/npp/128/">
<img class="imagen-slider" src="img/slider/cartelljornadesgaspatxeres2.jpg" alt="Light Echo" />
</a>
<div class="carousel-caption">
<p>Light Echo From Star V838 Monocerotis</p>
<p><a href="http://hubblesite.org/gallery/album/entire/pr2003010i/npp/128/">Hubblesite.org »</a></p>
</div>
</div>
<div class="item">
<a href="http://hubblesite.org/gallery/album/entire/pr2006024a/xlarge_web/npp/128/">
<img src="img/ngc5866.jpg" alt="Galaxy NGC5866" />
</a>
<div class="carousel-caption">
<p>Galaxy NGC 5866</p>
<p><a href="http://hubblesite.org/gallery/album/entire/pr2006024a/xlarge_web/npp/128/">Hubblesite.org »</a></p>
</div>
</div>
</div><!-- .carousel-inner -->
<!-- next and previous controls here
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- .carousel -->
<!-- end carousel -->
<div class="separador"></div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="thumbnail">
<img class="img_small" src="img/Main%20trans.png" alt="...">
<div class="caption">
<ul class="nav nav-tabs">
<li class="active"><h2>Quí som?</h2></li>
</ul>
<br>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="thumbnail">
<img class="img_small" src="img/Main%20trans.png" alt="...">
<div class="caption">
<ul class="nav nav-tabs">
<li class="active"><h2>Publicacions</h2></li>
</ul>
<br>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="thumbnail">
<img class="img_small" src="img/Main%20trans.png" alt="...">
<div class="caption">
<ul class="nav nav-tabs">
<li class="active"><h2>Intercanvi</h2></li>
</ul>
<br>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
</div>
<div class="separador"></div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="thumbnail">
<img class="img_small" src="img/Main%20trans.png" alt="...">
<div class="caption">
<ul class="nav nav-tabs">
<li class="active"><h3>Jornades d'estudis Gaspatxers</h3></li>
</ul>
<br>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="thumbnail">
<img class="img_small" src="img/Main%20trans.png" alt="...">
<div class="caption">
<ul class="nav nav-tabs">
<li class="active"><h2>Gent d'ací</h2></li>
</ul>
<br>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="thumbnail">
<img class="img_small" src="img/Main%20trans.png" alt="...">
<div class="caption">
<ul class="nav nav-tabs">
<li class="active"><h2>Exposicions</h2></li>
</ul>
<br>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
</div>
<div class="separador_grande"></div>
<div class="jumbotron" style="background-color: #333333;">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-3 contacte">
<h4>Contacte</h4>
<p class="contacte_info">
<img src="img/contacte.ico"> Associació d'amics de Mainhardt<br>
<img src="img/mail.ico"> correu@1and1.es<br>
<img src="img/tlf.ico"> tlf contacte<br>
</p>
</div>
<!-- Formulari Contacte
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 contacte">
<h2>Formulari de contacte</h2>
<form role="form">
<div class="form-group input-group-sm">
<label for="inputEmail1">Direcció e-mail</label>
<input type="email" class="form-control" id="inputEmail1" placeholder="e-mail">
</div>
<div class="form-group">
<label for="inputName">Nom</label>
<input type="text" class="form-control" id="inputName" placeholder="Nom">
</div>
<div class="form-group">
<label for="inputText">Missatge</label>
<textarea class="form-control" rows="3" id="inputText" placeholder="Missatge"></textarea>
</div>
<button type="submit" class="btn btn-default">Envia</button>
</form>
</div>
Fi Formulari Contacte -->
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 contacte">
<ul class="nav navbar-nav contacte_info menu_abajo">
<li><h4>Inici</h4></li>
<li>
<h4>Publicacions</h4>
<ul>
<li>Revistes</li>
<li>Llibres</li>
</ul>
</li>
<li><h4>Intercanvi</h4></li>
<li>
<h4>Jornades Gaspatxeres</h4>
<ul>
<li>I Jornades</li>
<li>II Jornades</li>
<li>II Jornades</li>
</ul>
</li>
<li>
<h4>Gent d'aci</h4>
<ul>
<li>Carme Vidal</li>
<li>Jorge Julve</li>
<li>Mar de fons</li>
</ul>
</li>
<li>
<h4>Exposicions</h4>
<ul>
<li>Eclipse 1905</li>
<li>Cara a Cara</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="separador_grande"></div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 contacte">
<p class="contacte_info copyright">Avís legal. Copyright </p>
</div>
</div>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script>
$(document).ready(function(){
$('.carousel').carousel({
interval: 4000
});
});
</script>
</body>
</html>
这是我修改过的 css (mainhardt.css)
body
{
font-family: arial,helvetica,sans-serif;
background-color: rgb(255, 252, 229);
}
.container
{
background-color: #E3F6CE;
}
p{
text-align: justify;
}
.img_small
{
max-height: 100px;
max-width: 175px;
}
.contacte
{
color: #999;
}
.contacte_info
{
font-size: 12px;
}
.copyright
{
text-align: center;
}
.menu_abajo li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
.menu_abajo > li > ul > li
{
display: block;
}
.separador
{
margin-top: 30px;
margin-bottom: 30px;
}
.separador_grande
{
margin: 60px 0 60px 0;
}
.carousel-caption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 10px 15px 5px;
background: #333333;
background: rgba(0, 0, 0, 0.75);
}
.carousel-caption h4,
.carousel-caption p {
color: #ffffff;
}
.imagen-slider
{
margin: 0 auto 0;
}
.carousel-inner
{
background-image: url(../img/glyphicons-halflings-white.png);
}
最佳答案
见第二张图片中的地址栏。您已经缩小了第二张图片...
放大将解决您的问题..
关于css - Bootstrap : two files with same code in same browser different results，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19364444/
32
4
0
code正常吗？
我刚刚开始使用 YARD 来记录我的 Rails 应用程序。我没有指定任何特定的标记处理程序，但我希望 `code` 会转换为 code，但这似乎没有发生。这是正常行为吗？我是否必须添加一些额外的选项
什么是Code-Server 首先程序员朋友们肯定都用过来自微软的VS Code 这款轻量而又高级的编辑器，拥有丰富的插件库，支持各种语言编译运行。而本文介绍的Code-Server就是coder 公
我是一名高中生，今年开始学习汇编。 我目前正在制作 Pacman 克隆作为我的最终项目。 我遇到的唯一问题是我的代码很大，*.exe 文件几乎有 64KB。 所以我的问题是，如果我转向模型介质，我需要
锁定。这个问题及其答案是locked因为这个问题是题外话，但具有历史意义。它目前不接受新的答案或互动。 挑战 按字符计数绘制 Code 39 条码的 ASCII 表示的最短代码。 维基百科关于代码 3
我正在开发 VS 代码的扩展(使用 javascript)。现在我需要安装 VS Code 的路径。 windows有一种方法: var child = require('child_process'
[Windows 10] 我在自定义目录中安装了“Microsoft VS Code(用户设置)”，每当我尝试更新它时，都会显示: 然后这个 Log Info Dec 23 11:42:40.673
我正在尝试更新我的 VS 代码，但收到一条错误消息:由于防病毒软件和/或进程失控，更新可能会失败。 附加了一个来 self 的用户的日志文件，但我不确定要检查什么。我对计算机和编程还是个新手。 最佳答
几天前我安装了 Kali Linux。我正在尝试使用 Code-OSS 而不是 VSCode，因为最新版本的 Kali 没有安装普通版本所需的库。 如果我尝试使用 code-oss . 或 code
我正在从 Atom 迁移到 VS Code，因为这似乎是当今所有酷 child 都在使用的东西。 在 atom 中，我能够如图所示突出显示当前行号(装订线中的蓝色突出显示)。 有没有办法在 VS Co
我试图找到一个明确的 G 代码语法规范，而不是单个 G 代码的含义，我无处不在的规范，我的意思是详细的语法规范，目的是编写解析器。 我编写解析器没有问题，我只是在寻找语法规范，例如。我知道您不必总是为
我想在 VS Code (Windows) 中使用 Fira Code，并且已经按照 instructions 中的说明配置了字体。 。不知何故，字体看起来很模糊。我该如何解决这个问题？ "edito
这个问题已经有答案了: How can I navigate back to the last cursor position in Visual Studio Code? (16 个回答) 已关闭
如何选择当前单词，即插入符号所在的位置。 注意:我正在寻找 Visual Studio Code(VS Code)(文本编辑器)的快捷方式，而不是 Visual Studio IDE。 最佳答案 在
我需要在 VS Code 中安装 flutter 但在安装扩展中，我有这个错误 Unable to install 'Dart-Code.flutter'; there is no available
memberData 有什么区别
{@code memberData} 和有什么区别？和 memberData在 JavaDoc 中 最佳答案 有两个主要区别: {@code ...}更简洁:更易于阅读(和输入)。 {@code ..
我有这样一个字符串: Here is my code sample, its not too great: [CODE] [/CODE] I hope you enjoy. 现在我想用 highli
在 VS Code 中，我有一个少于 50 个文件的 Vue 项目，但是在运行开发服务器时 VS Code 抛出 Error: ENOSPC: System limit for number of f
Source Code Pro 如何在 VSC 中使用 ExtraLight ~？ 似乎以下不起作用...... 我确定我有字体。 Source Code Pro ExtraLight 最佳答案 编辑
我对 Visual Studio Code 很陌生。我正在尝试调试一个已经存在的应用程序，我已经通过 Git 克隆了它。我的文件都没有被修改。我已经下载了微软扩展“C# for Visual Stud
Visual Code VS Visual Studio Code Insider 我还是不明白这两者有什么区别，难道其中一个是新功能的试用版吗？ 最佳答案 Visual Studio Code In
我是一名优秀的程序员,十分优秀！