-1

我一直在努力调整我的导航栏元素导航栏 图片

问题是:

  • 将输入 div 和搜索按钮放在品牌形象旁边的左侧。
  • 修改输入 div 的宽度。我试过 col-6 但它没有用

贝娄是代码:

<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light">
      <a class="navbar-brand" href="#">
          <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
          Bootstrap
        </a>
    <button class="navbar-toggler bg-light" type="button" data-toggle="collapse" data-target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <form class="form-inline my-lg-0 ml-auto">
            <input class="form-control my-2 mr-sm-2" type="search" placeholder="Search for people, firms" aria-label="
              Search">
            <input class="form-control my-2 mr-sm-2" type="search" placeholder="Location (e.g., Los Angeles)"
              aria-label="Search">

            <button class="btn btn-outline-dark my-2 my-sm-0" type="submit"><i class="fas fa-search"></i>
              Search</button>
          </form>
        </li>
        <li class="nav-item">
          <a class="nav-link px-3" href="#"> <i class="fas fa-ticket-alt"></i> Support <span
              class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link px-3" href="#"><i class="fas fa-user-plus"></i> Sign up</a>
        </li>
        <li class="nav-item">
          <a class="nav-link px-3" href="#"><i class="fas fa-sign-in-alt"></i> Log in</a>
        </li>
        <li class="nav-item">
          <a class="nav-link px-3" href="#"><i class="fas fa-search"> </i> Search</a>
        </li>
      </ul>

调整导航栏后,我想将其集成到 Struts 1 项目中。我无法向输入 div 添加占位符值。你有什么主意吗?

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">.   </script>

<%@ page contentType="text/html" pageEncoding="UTF-8" %>
<%@ taglib uri="/WEB-INF/taglib/struts-html.tld" prefix="html" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="mfb" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="${homeUrl}">
    <img src="<mfb:base/>images/logo.png" width="200" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler bg-light" type="button" data-toggle="collapse" data-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarNav">

    <ul class="navbar-nav ml-lg-5">
        
        <html:form action="fulltextsearch" styleClass="form-inline my-lg-0 ml-auto">
            <c:if test="${currentUserContext.moduleSearchWhatEnabled}">
                <label for="user" class="infield"><mfb:message key="label.autocompleteUser"/></label>
                <html:text
                        property="user"
                        styleId="user"
                        styleClass="form-control px-4 my-2 mr-sm-2"/>
            </c:if> 

这是结果的屏幕截图。struts 1中的截图搜索输入

谢谢你。

4

3 回答 3

0

使用 2 个单独navbar-nav

<nav class="navbar navbar-expand-lg navbar-light">
    <a class="navbar-brand" href="#">
        <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt=""> Bootstrap </a>
    <button class="navbar-toggler bg-light" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <form class="form-inline my-lg-0 ml-auto">
                    <input class="form-control my-2 mr-sm-2" type="search" placeholder="Search for people, firms" aria-label="
              Search">
                    <input class="form-control my-2 mr-sm-2" type="search" placeholder="Location (e.g., Los Angeles)" aria-label="Search">
                    <button class="btn btn-outline-dark my-2 my-sm-0" type="submit"><i class="fas fa-search"></i> Search</button>
                </form>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link px-3" href="#"> <i class="fas fa-ticket-alt"></i> Support <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link px-3" href="#"><i class="fas fa-user-plus"></i> Sign up</a>
            </li>
            <li class="nav-item">
                <a class="nav-link px-3" href="#"><i class="fas fa-sign-in-alt"></i> Log in</a>
            </li>
            <li class="nav-item">
                <a class="nav-link px-3" href="#"><i class="fas fa-search"> </i> Search</a>
            </li>
        </ul>
    </div>
</nav>

演示:https ://codeply.com/p/tLF5C7gwjv

于 2020-10-15T13:01:03.390 回答
0

我了解您面临的问题有解决方案。要将搜索和输入 div 放在图标图像附近的左侧,只需按照您希望的顺序为元素添加 ml-1 及以后。要修改输入 div 的宽度,请使用 py 和 px(例如:py-2 或 px-3)。py 在 y 轴上填充, px 在 x 轴上填充。同样,my 表示 margin,ml mans margin-left,mt 表示 margin-top,mr 表示 margin-right,mb 表示 margin-bottom。如果您仍然遇到任何问题,请询问我,我会将代码发送给您作为解决方案:)

于 2020-10-15T13:11:43.570 回答
-1

将输入 div 和搜索按钮放在单独的 div 中并添加class="mr-auto"到其中。

<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
</a>
<button class="navbar-toggler bg-light" type="button" data-toggle="collapse" data-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <form class="form-inline my-lg-0 ml-auto">
                <input class="form-control my-2 mr-sm-2" type="search" placeholder="Search for people, firms" aria-label="
                       Search">
                <input class="form-control my-2 mr-sm-2" type="search" placeholder="Location (e.g., Los Angeles)"
                       aria-label="Search">

                <button class="btn btn-outline-dark my-2 my-sm-0" type="submit"><i class="fas fa-search"></i>
                    Search</button>
            </form>
        </li>
    </ul>
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link px-3" href="#"> <i class="fas fa-ticket-alt"></i> Support <span
                    class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link px-3" href="#"><i class="fas fa-user-plus"></i> Sign up</a>
        </li>
        <li class="nav-item">
            <a class="nav-link px-3" href="#"><i class="fas fa-sign-in-alt"></i> Log in</a>
        </li>
        <li class="nav-item">
            <a class="nav-link px-3" href="#"><i class="fas fa-search"> </i> Search</a>
        </li>
    </ul>
</div>
于 2020-10-15T13:17:58.810 回答