Question

我对HTML，CSS和JavaScript有点新鲜。现在我正在使用Bootstrap，我在导航栏中插入了一个徽标，导致溢出。导航栏没有使用徽标调整大小，因此徽标的一部分突出显示在页面上。

我想知道如何调整导航栏的大小以适应徽标。

编辑：这是一些HTML代码。 CSS代码太长了，无法放在这里，我不知道这部分代码的CSS代码片段在哪里。以下是CSS的链接：https://drive.google.com/file/d/0BwHwbNKvGsEpbmxvUTVpcUNkZjg/view?usp=sharing

        <!-- Fixed navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <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>
                     <span class="icon-bar"></span>
                </button>
                 <a class="navbar-brand" href="#"><img src="http://www.mexicobariatricsurgerycenters.com/images/logo.png" height="70px" title="Logo" /></a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="/">Home</a>
                    </li>
                    <li><a href="#about">About</a>
                    </li>
                    <li><a href="#contact">Contact</a>
                    </li>
                    <li class="dropdown">
                         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a>
                            </li>
                            <li><a href="#">Another action</a>
                            </li>
                            <li><a href="#">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li class="dropdown-header">Nav header</li>
                            <li><a href="#">Separated link</a>
                            </li>
                            <li><a href="#">One more separated link</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>

    <div class="container theme-showcase">

感谢您的帮助！这是我在这里的第一个问题，对不起，如果我对我的询问有点模糊。

Answer 1

如果您使用Bootstrap with .less，您可以更新variables.less文件，只需更改下面的高度变量：

 <div class="media">
  <%= content_tag :div, class: 'media', id: "comment-#{comment.id}" do   %>
  <%= link_to '#', class: 'pull-left' do %>
  <%= image_tag(comment.user.avatar.small.url, class: "media-object")       if comment.user.avatar? %>
  <% end %>
  </div>
    <div class="media-body">
     <small>
      <%= comment.user.name %> commented <%=     time_ago_in_words(comment.created_at) %> ago
  <% if policy(comment).destroy? %>
    | <%= link_to "Delete", [comment.post, comment], method: :delete,    remote: true %>
  <% end %>
    </small>
   <p><%= comment.body %></p>
  </div>
 </div>

但我认为你可能正在使用标准的CSS，在这种情况下你必须像这样覆盖它：

@navbar-height: 50px;

请记住，在包含bootstrap CSS后，您需要执行此操作，并且您的选择器可能需要更具体。

此外，如果您将徽标放在.brand部分中，您可能还需要使用

等扩展徽标。

.navbar { 
  min-height: 50px; // your value here. 
}

Answer 2

为什么你要调整导航栏的大小..尝试重新调整徽标大小

无论如何，如果你想隐藏一些溢出的内容，你可以使用css属性：

DECLARE 
TYPE cu_income_detail is ref cursor;
income_det cu_income_detail;
BEGIN 

    income_det := pck_my_pack.f_my_func(2542586);

    FOR CURRVAL IN income_det LOOP     -- I have also tried CUR_VAL
         IF CURRVAL.pcls_paid_as_income > 0 THEN 
         -- Logic yet to be implemented once get the value
         dbms_output.put('PCLS paid');  
         dbms_output.put_line(CUR_VAL.pcls_paid_as_income);
        END IF;
    END LOOP;
END;

更改Bootstrap CSS中的Navbar大小

2 个答案: