Question

我正在建立一个个人网站，并且是一个非常新的HTML。我的导航栏看起来像

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bob Mandal | Projects</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="MyWebsiteScript.js"></script>
  <link rel="stylesheet" href="MyStyleSheet.css" />
</head>

<body>

  <nav class="navbar navbar-inverse  navbar-fixed-top">
    <div class="container-fluid">
      <!---logo-->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
          <span class="icon-bar"> </span>
          <span class="icon-bar"> </span>
          <span class="icon-bar"> </span>
        </button>
        <a class="navbar-brand" style="font-weight: bold">Bob Mandal</a>
      </div>

      <!--menu Item here-->
      <div class="collapse navbar-collapse" id="mainNavBar">
        <ul class="nav navbar-nav">
          <li>
            <a href="#" style="font-weight: bold">About Me</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="font-weight: bold">Curriculum Vitae<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li>
                <a href="#" target="_blank" style="font-weight: bold">CV</a>
              </li>
              <li>
                <a href="#" target="_blank" style="font-weight: bold">Resume</a>
              </li>
            </ul>
          </li>
          <li class="active dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="font-weight: bold">Projects<span class="caret"></span></a>
            <ul class="dropdown-menu project-menu">
              <li style="text-align: center">
                <a href="#Pilot" style="font-weight: bold" class="sidebarlink">Research</a>
              </li>
              <li style="text-align: center">
                <a href="#PIRAT" style="font-weight: bold">Arrrgh</a>
              </li>
              <li style="text-align: center">
                <a href="#SAMPLE" style="font-weight: bold">This is a very long sentence which I need to divide into two line.Is it possible?</a>
              </li>
              <li style="text-align: center">
                <a href="#Quad" style="font-weight: bold">Quad</a>
              </li>
            </ul>
          </li>
        </ul>

        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="#" style="font-weight: bold">Contact</a>
          </li>
          <li id="linkedIn">
            <a href="#" width="22px" />Linked in</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>

我向所有专家提出的第一个问题是，如何在多个句子的下拉菜单中包装长句？我不担心大屏幕，但在标准的Android手机上，它看起来很可怕。

我的第二个问题是在移动设备上，当导航栏是类似菜单的下拉菜单时。用户单击菜单项后如何确保导航栏缩回或关闭或折叠。现在我必须切换屏幕右上角的图标来缩回或折叠下拉菜单。

我将不胜感激。

Answer 1

您可以通过在段落标记之间添加第二行来轻松完成此操作。像这样：http://jsfiddle.net/ycUB6/10706/

  <a href="#SAMPLE" style="font-weight: bold">This is a very long sentence which
  <p>I need to divide into two line.Is it possible</p></a>

如何在引导程序中将长列表句子分成多行

1 个答案: