【发布时间】：2021-01-29 23:16:09
【问题描述】：
我一直在努力调整我的导航栏元素 Navbar picture
问题是：
- 将输入 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>
这是结果的屏幕截图。 Screenshot search input in struts 1
谢谢。
【问题讨论】：
标签： html bootstrap-4