在bootstrap 3.3.5中更改导航宽度（从1170px到940px）
我需要将页面导航的默认宽度设置为较小的值。
我认为最好给你一些背景信息：
我是使用R的数据分析师。我有一个普通的网页（基本的html和css），但现在我正在尝试用RMarkdown创建一个网页。
问题：
问题在于Rmarkdown生成一个具有固定宽度的HTML，我无法使用纯CSS重现。
我以很多形式“攻击”导航栏的“nav”类但没有成功。
这是用于调用引导程序库的URL（3.3.5）：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
现在，这是我在CSS文件中唯一的代码。您可以指导我找到解决方案吗？
body {
max-width: 940px;
margin-top: 52px;
margin-left: 34px;
margin-right: 84px;
}
这是我的HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>omargonzalesdiaz - data science</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/estilos.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-WNFRFK"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WNFRFK');</script>
<!-- End Google Tag Manager -->
<div class="container">
<!-- The justified navigation menu is meant for single line per list item.
Multiple lines will require custom code not provided by Bootstrap. -->
<div class="masthead top50">
<h2 class="text-muted">omar gonzáles díaz</h2>
<p class="text-muted">Data Analyst and R Programmer</p>
</br>
<nav>
<ul class="nav nav-justified">
<li class="active"><a href="index.html">Inicio</a></li>
<li><a href="projectos.html">Projectos</a></li>
<li><a href="blog.html">¡Blog!</a></li>
<li><a href="js-ejercicios.html">Javascript</a></li>
<li><a href="sobre-mi.html">Sobre mí</a></li>
</ul>
</nav>
</div>
</br>
</br>
</br>
<!-- Jumbotron -->
<div class="main row top50">
<!--SIEMPRE TRABAJAR LA COL NORMAL Y LA COL PUSH -->
<aside class="col-md-4 col-md-push-8 top20">
<a id="yo" href="index.html"><img src="images/yo.png" class="center-block image_on"><img src="images/yo-bn.png" class="center-block image_off"></a>
<div class="text-center top10">
<a href="https://pe.linkedin.com/in/omargonzales"><img src="images/linkedin.png" alt="linkedin" class="img-responsive center-block align-inline size15"></a>
<a href="https://github.com/OmarGonD"><img src="images/Github.png" class="img-responsive center-block align-inline size15"></a>
<a href="https://twitter.com/o_gonzales"><img src="images/twitter.png" class="img-responsive center-block align-inline size15"></a>
<a href="mailto:oma.gonzales@gmail.com"><img src="images/gmail.png" class="img-responsive center-block align-inline size15"></a>
</div>
</br>
<p class="text-center">Movistar: 98-800-8026</p>
<p class="text-center text-muted">Lima - Perú</p>
</aside>
<!--SIEMPRE TRABAJAR LA COL NORMAL Y LA COL PULL -->
<article class="col-md-8 col-md-pull-4 text-justify">
<p>Este es el sitio de Omar Gonzáles Díaz. Soy un egresado
de la facultad de <a href="http://udep.edu.pe/comunicacion/">
Comunicación de la Universidad de Piura</a>,
con especialización en Marketing. Además, realicé un
<a href="http://marketingdigital.pe/">Diplomado en Marketing
Digital</a> en la misma casa de Estudios (2013).</p>
<p>Me interesa el mundo del <a href="https://es.wikipedia.org/wiki/An%C3%A1lisis_de_datos">
Análisis de Datos</a>. Gracias a Dios,
tuve la oportunidad de analizar las campañas de marketing
digital de importantes empresas peruanas (Ecommerce sites y otros clientes).</p>
<p>Este sitio intenta recoger todo lo aprendido, y lo que
queda por aprender, sobre el análisis de datos, especialmente
el manejo de datos en R.</p>
<p>Debido a que la poca información disponible
en español, aquí encontrarán mis propias experiencias con "R y
el análisis de datos"; así como material recolectado de la web.</p>
</br>
<h2>Recursos profesionales:</h2>
<ul>
<li>Mi Hoja de Vida:</li></br>
<!--<a href="cve.html">Mi Hoja de Vida - Español (html)</a>-->
<div class="align-inline">
<form action ="assets/OMAR ANDRÉ GONZÁLES DÍAZ - Esp.pdf" method="get">
<button id="spanish" type="submit" class="download right20 btn btn-primary">PDF Español</button>
</form>
</div>
<div class="align-inline">
<form action ="assets/OMAR ANDRÉ GONZÁLES DÍAZ - Eng.pdf" method="get">
<button id="english" type="submit" class="download left20 btn btn-primary">PDF English</button>
</form>
</div>
</br>
</ul>
</article>
</div>
<!-- Example row of columns -->
<div class="row top20">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 color1 text-justify">
<h3>Blog!</h3>
<p>Todos los artículos estarán publicados aquí:</p>
<p></p>
<p><a class="btn text-center" href="blog.html" role="button">Visitar el Blog! »</a></p>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 color1 text-justify">
<h3>Data Science: </h3>
<p>En esta sección encontrarán otros blogs que visitó, principalmente, sobre temas de analítica y visualización de datos</p>
<p>Además, encontrarán artículos diversos, entrevistas a otros analistas, etc.</p>
<p><a class="btn text-center" href="#" role="button">Visitar el Blog! »</a></p>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 color1 text-justify">
<h3>Javascript</h3>
<p>Aquí encontrarán todos los ejercicios resueltos de Javascript.</p>
<p>Me considero bastante autodidacta. Basta googlear algo para empezar a aprender. </p>
<p><a class="btn text-center" href="js-ejercicios.html" role="button">JS - Ejericicios »</a></p>
</div>
</div>
<!-- Site footer -->
<footer class="bottom20">
<hr>
<div>© <a href="index.html">omar gonzales diaz</a>
2015
</div>
</footer>
</div> <!-- /container -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="jquery/jquery-1.11.3.min.js"></script>
<script src="jquery/jquery.matchHeight.js" type="text/javascript"></script>
<script>
$(function() {
$('.color1').matchHeight();
});
</script>
</body>
</html>
我搜索过这个话题，这是我发现的最接近的案例。
How to change navbar/container width? Bootstrap 3
根据那个问题，默认宽度是1170px，我想把它设置为940px，并从那里播放数字直到a）正常的html页面和b）用rmardown生成的html是相同的宽度。 / p>
我也不明白@media部分......
查看图片：
HTML（NORMAL）：右边的间隙较小（在“Sobremí”部分旁边），我需要与Rmarkdown HTML页面的宽度相同：
HTML（RMARKDOWN）：
更新1 ：
在第一次回答之后，我认为这可能与每个元素的填充有关，所以我插入了：
.nav>li>a {
padding: 10px 10px;
}
但未发生变化。
这是元素：“Sobremì”视察：
2 个答案:
答案 0 :(得分：0)
从您的浏览器中检查导航栏并查看哪个属性导致问题并尝试从那里修复它。然后您可以更改您的css文件。@ media就像“if”语句。例如：
@media screen and (max-width:600px){
.button{
background-color: green;
}
仅当设备宽度为600px时才会应用.button。
答案 1 :(得分：0)
我认为你可以通过简单地添加一些填充nav元素来获得你想要的效果。如果这对你有用，请告诉我。
<style>
nav.navPadded { padding-left: 1em; padding-right: 1em; }
/* remember to add the navPadded class to the nav */
</style>
或者，如果您希望导航是固定大小（不大于）而不是流畅和填充，那么您可以这样做：
<style>
nav.navConstricted{ max-width: 940px; }
/* remember to add the navConstricted class to the nav */
</style>
对于@media指令，这是一个“媒体查询”。它允许用户根据用户浏览器的类型（屏幕）和大小（最大宽度：940px）设置特定的CSS。
在这种情况下，如果你只是想要一点额外的空间，那么我认为你不需要担心媒体查询（除非我提供的建议不起作用）。
要查看更改，您必须全屏查看以下结果。导航对齐切换到较小视口上的堆叠演示文稿。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<style>
nav.navPadded { padding-left: 1em; padding-right: 1em; }
nav.navConstricted{ max-width: 940px; }
</style>
<div class="masthead">
<h2 class="text-muted">omar gonzáles díaz</h2>
<p class="text-muted">Data Analyst and R Programmer</p>
<!-- add one of either class navPadded or navConstricted -->
<nav class="navPadded">
<ul class="nav nav-justified">
<li class="active"><a href="index.html">Inicio</a></li>
<li><a href="projectos.html">Projectos</a></li>
<li><a href="blog.html">¡Blog!</a></li>
<li><a href="js-ejercicios.html">Javascript</a></li>
<li><a href="sobre-mi.html">Sobre mí</a></li>
</ul>
</nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
相关问题
- 使用宽度1170px与bootstrap.css（响应）
- 为什么bootstrap宽度仅限于940px？
- 如何使用bootstrap固定宽度布局为1170px宽度？
- Twitter引导程序，宽度为＆gt; 1170px
- Bootstrap 3 - 940px宽度网格？
- Bootstrap V2中的全宽面板“盒装”（1170px）布局
- 将桌面的Bootstrap网格和容器宽度从1170px更改为1000px
- 如何将Photoshop中的Bootstrap 1170px宽度更改为990px？
- 增加自举网格宽度超过1170px
- 在bootstrap 3.3.5中更改导航宽度（从1170px到940px）
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？