【问题标题】:Logo overflow on navbar (Bootstrap 3)导航栏上的徽标溢出(Bootstrap 3)
【发布时间】:2015-01-17 10:37:44
【问题描述】:

我对 bootstrap 非常陌生,对此我感到有些沮丧。 我正在尝试建立一个响应式网站,我需要我的徽标溢出导航栏。我是在 html 和 css 中完成的(不使用引导程序),但它没有响应。 这就是我想用引导程序做的事情,但我一直惨败。 http://prntscr.com/5tifol 这是 html/css 代码:

`<body>
<div id="motodiv">
<div id="text1" style="display:none;">TEXTTEXTTEXTTEXTTEXT</div>
<div id="text2" style="display:none;">TEXTTEXTTEXTTEXTT</div>
</div>
<div id="logo"><img id="logoimg" src="logo.png"></div>`

http://jsfiddle.net/yn7o2neb/ 这就是我用引导程序所做的 http://prntscr.com/5tifrp 这是引导代码:`

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
  </head>
  <body>
        <div class = "navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                        <a class="brand" href="index.html"> <img src="images/logo.png" class="img-responsive clearfix logo"></a>
                </div>
            </div>
        </div>


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>`

http://jsfiddle.net/oc5vgha4/ 欢迎任何帮助。此外,当我尝试调整图像大小时,导航栏正在调整大小。

【问题讨论】:

  • 由于这里没有代码可以看看你尝试过的,能否告诉我们你是否尝试过css定位?
  • 我试过css定位,但是没有响应。我添加了代码

标签: jquery html css twitter-bootstrap navbar


【解决方案1】:

.navbar-brand 类上试试这个 CSS

.navbar-brand {                
    position: absolute;
    left: 0px;
    top: 0px;
    width: 50px;        
    margin-left: 0px;
    padding: 30px;
}

您可以根据需要调整填充甚至定位。 你可以在http://jsfiddle.net/0hmrd1b8/看到我的例子

我希望这会有所帮助!

【讨论】:

  • 谢谢,确实有帮助!
  • 太棒了!很高兴听到这对您有帮助。介意将我的答案投票为解决您问题的答案吗? :) @DimitrijeMitic
  • 如果你点击复选标记,这就是说我的回答解决了你的问题@DimitrijeMitic
  • 我点击了!我是新人,我不知道,再次感谢你:)
  • 没问题 :) @DimitrijeMitic
猜你喜欢
  • 2013-08-30
  • 2018-07-27
  • 2013-12-17
  • 2017-03-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多