Bootstrap 导航栏不适合整个页面

ztyzrc3y 于 2023-09-28 发布在 Bootstrap

关注(0)|答案(5)|浏览(129)

我有一个问题，我的导航栏不适合整个页面，如下所示：它发生在我实现Apache Tiles用于模板化之后

我的menu.jsp是：

<nav class="navbar navbar-inverse">
<div class="container">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Spring Boot</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="/flight_information_display">Home</a></li>
            <li><a href="/flight_information_display/about">About</a></li>
        </ul>
    </div>
</div>
</nav>

为什么导航栏不适合整个页面？我还使用了Apache Tiles作为模板，我的布局是：

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<html>
<head>
    <title><tiles:getAsString name="title" /></title>
    <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

    <link rel="stylesheet" type="text/css"
            href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />

    <!-- 
            <spring:url value="/css/main.css" var="springCss" />
            <link href="${springCss}" rel="stylesheet" />
             -->
    <c:url value="/css/main.css" var="jstlCss" />
    <link href="${jstlCss}" rel="stylesheet" />

</head>

<body>
    <table>
        <tr>
            <td>
                <tiles:insertAttribute name="menu" />
            </td>
        </tr>
        <tr>
            <td>
                <tiles:insertAttribute name="header" />
            </td>
        </tr>
        <tr>
            <td>
                <tiles:insertAttribute name="body" />
            </td>
        </tr>
        <tr>
            <td>
                <tiles:insertAttribute name="footer" />
            </td>
        </tr>
    </table>
</body>

main.css

h1{
    color:#0000FF;
}

h2{
    color:#FF0000;
}

如果您需要任何其他代码提供，请让我知道。先谢谢你

twitter-bootstrap

来源：https://stackoverflow.com/questions/48457967/navbar-not-fitting-the-whole-page

5条答案

按热度按时间

tmb3ates1#

我怀疑在：

/css/main.css or  <link href="${jstlCss}" rel="stylesheet" />

把所有东西都往左拉当你使用“container”类时，你的menubar+nav应该居中显示，两边都有填充。看起来填充是正确的，但页面被拉向左侧。
注意：容器流体，导致布局没有这种集中式布局，有填充。
您的问题在于其他CSS（main.css或${jstlCss}）。您可以使用F12调试器来查找问题。查找删除填充的样式。
我怀疑在main.css中有一个名为“container”的类
或<link href="${jstlCss}" rel="stylesheet" />

赞(0）回复(0）举报 2023-09-28

igetnqfo2#

尝试将.full-width { width: 100%; }类添加到div中，使其类似于<div class="container full-width">。如果这不起作用，那么尝试检查导航栏类，以便您可以在CSS文件中修改它们。

编辑：

这是bootstrap的常用导航栏：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

赞(0）回复(0）举报 2023-09-28

zzlelutf3#

将宽度增加到100%。试试下面的代码片段

.navbar {
  width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav class="navbar navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Spring Boot</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/flight_information_display">Home</a></li>
        <li><a href="/flight_information_display/about">About</a></li>
      </ul>
    </div>
  </div>
</nav>

屏幕截图（扩展到2个显示器）

已编辑

更改上述代码的格式

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<html>
<head>
    <title><tiles:getAsString name="title" /></title>
    <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

    <link rel="stylesheet" type="text/css"
            href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />

    <!-- 
            <spring:url value="/css/main.css" var="springCss" />
            <link href="${springCss}" rel="stylesheet" />
             -->
    <c:url value="/css/main.css" var="jstlCss" />
    <link href="${jstlCss}" rel="stylesheet" />

</head>

<body>
    <div>
        <tiles:insertAttribute name="menu" />
    </div>
    <div>
        <tiles:insertAttribute name="header" />
    </div>
    <div>
        <tiles:insertAttribute name="body" />
    </div>
    <div>
        <tiles:insertAttribute name="footer" />
    </div>
</body>

赞(0）回复(0）举报 2023-09-28

a14dhokn4#

我可以通过改变我的瓷砖布局来解决我的问题。我用div代替table

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<html>
<head>
    <title><tiles:getAsString name="title" /></title>
    <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

    <link rel="stylesheet" type="text/css"
            href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />

    <!-- 
            <spring:url value="/css/main.css" var="springCss" />
            <link href="${springCss}" rel="stylesheet" />
             -->
    <c:url value="/css/main.css" var="jstlCss" />
    <link href="${jstlCss}" rel="stylesheet" />

</head>

<body>
    <div>
        <tiles:insertAttribute name="menu" />
    </div>
    <div>
        <tiles:insertAttribute name="header" />
    </div>
    <div>
        <tiles:insertAttribute name="body" />
    </div>
    <div>
        <tiles:insertAttribute name="footer" />
    </div>
</body>

赞(0）回复(0）举报 2023-09-28

yr9zkbsy5#

你的css代码在哪里：

.navbar {
    /* ... (existing styles) ... */
    /* Add the following properties */
    width: 100%; /* Make the navbar take up the full width of the screen */
    position: fixed; /* Fix the navbar at the top of the screen */
    left: 0;
    right: 0;
  }

赞(0）回复(0）举报 2023-09-28

我来回答

Bootstrap 导航栏不适合整个页面

5条答案

相关问题

热门标签

最新问答