个人中心
gpt4 book ai didi

html - 在 bootstrap 3.3.5 中更改导航宽度(从 1170px 到 940px)

转载 作者：行者123 更新时间：2023-11-28 05:34:39 26 4
gpt4 key购买 nike

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

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

我是一名使用 R 的数据分析师。我有一个普通的网页(基本的 html 和 css)，但现在我正在尝试使用 RMarkdown 创建一个网页。

问题:

问题是 Rmarkdown 生成一个具有固定宽度的 HTML，我无法使用纯 CSS 重现它。

我已经以多种形式“攻击”了我的导航栏的“nav”类，但都没有成功。

这是用于调用 Bootstrap 库 (3.3.5) 的 URL:

<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 是相同的宽度。

我也不明白@media 部分...

查看图片:

HTML (NORMAL): 右侧部分的间隙较小(在“Sobre mí”部分旁边)，我需要它与 Rmarkdown HTML 页面的宽度相同:

enter image description here

HTML(RMARKDOWN):

enter image description here

更新 1:

在第一个答案之后，我认为这可能与每个元素的填充有关，所以我插入:

.nav>li>a {
    
    padding: 10px 10px;
}

但没有发生变化。

这是元素:“Sobre mì”检查:

enter image description here

最佳答案

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

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

仅当设备宽度为 600px 时，这将应用于 .button。

关于html - 在 bootstrap 3.3.5 中更改导航宽度(从 1170px 到 940px)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38297728/

26 4 0
文章推荐： ios - SKLabelNode 未出现在实际设备上
文章推荐： objective-c - swift/Objective-C : How to call a view-controller-method from another class
文章推荐： swift - 类型不可转换为 'NativeObject'
文章推荐： ios - UITextField 字符限制
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com