Question

我需要将页面导航的默认宽度设置为较小的值。

我认为最好给你一些背景信息：

我是使用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! &raquo;</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! &raquo;</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 &raquo;</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ì”视察：

Answer 1

从您的浏览器中检查导航栏并查看哪个属性导致问题并尝试从那里修复它。然后您可以更改您的css文件。@ media就像“if”语句。例如：

@media screen and (max-width:600px){
    .button{
         background-color: green;
     }

仅当设备宽度为600px时才会应用.button。

Answer 2

我认为你可以通过简单地添加一些填充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>

在bootstrap 3.3.5中更改导航宽度（从1170px到940px）

2 个答案: