我在这里有此页面demoPage，我正在尝试使我的导航栏品牌与该页面保持一致。现在，我已经添加了带有navbar-brand的自定义填充，但是如果我更改浏览器的大小，我希望它对页面具有响应性。我也想在学校名称和徽标之间留一点空间。我怎样才能做到这一点？我已经用一个有角度的组件写了这个页面
hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.alignLeft {
float: left;
}
.indented {
padding-left: 50pt;
padding-right: 50pt;
}
.col-sm-9 {
background-color: white;
}
img {
padding-left: 10px;
width: 100%;
height: 100%;
}
h3 {
text-align: center;
padding-left: 20px;
}
h4,
p {
padding-left: 20px;
padding-right: 20px;
text-align: justify !important;
}
.para1 {
text-align: center !important;
}
h4:first-child {
display: inline;
margin-left: 20px !important;
}
h4:nth-child(2) {
text-align: left !important;
}
p:first-child {
text-align: center !important;
}
p:nth-child(3) {
text-align: left !important;
float: left !important;
}
@media (min-width: 480px) {
img {
float: left;
padding-right: 10px;
padding-bottom: 0px;
}
.col-sm-9 {
padding-bottom: 25px;
}
h4,
p {
padding-left: 20px;
padding-right: 20px;
text-align: justify !important;
}
.container-fluid {
text-align: justify !important;
}
}
.columns1 {
align-self: center;
justify-self: center;
background-color: white;
margin-bottom: 0;
}
.center2 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
justify-content: center;
padding-left: 400px;
padding-right: 400px;
margin-bottom: 0;
}
.center {
margin: 0 auto;
width: 90%;
padding-left: 300px;
}
.jumbotron {
align-items: center;
}
.center1 {
margin: auto;
width: 50%;
padding-left: 140px;
}
.footer-copyright {
width: 100%;
background-color: gray;
padding-right: 70px;
}
.footer {
font-family: "Roboto", sans-serif;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
-ms-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
border: none;
background-color: grey;
bottom: 0;
position: relative;
left: 0;
z-index: 12;
width: 100%;
white-space: nowrap;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
float: left;
height: 50px;
font-size: 18px;
margin-top: 100px;
}
.footer a {
background-color: transparent;
}
a {
color: white;
text-align: center;
}
.navbar-brand {
padding-left: 450px;
}
.navbar {
font-family: "Roboto", sans-serif;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
-ms-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
border: none;
position: fixed;
top: 0;
left: 0;
z-index: 12;
width: 100%;
}
.navbar .navbar-brand {
white-space: nowrap;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> HTML Code
<div class="container-fluid">
<nav class="navbar">
<a class="navbar-brand" asp-controller="Home" asp-action="Index"><i class="fa
fa-cubes"></i> GEP <span class="header-logo-text">Learning Management
System</span></a>
</nav>
<div class="jumbotron vertical-center">
<div class="row content">
<div class="center2">
<div class="columns1 text-center">
<img class="img-responsive" src="/assets/images/school.png" alt="Smiley face" style="float:left; border:2px solid gray; border-radius: 50%; display: inline; width:90px; height:80px; margin-top:60px; margin-left: 20px;">
<h4 align="left" style="margin-top: 90px;">
School Name/ Title<br><br><br>
</h4>
<br>
<hr>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo </p>
</div>
<br>
<div>
<img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:right;width:200px;height:200px;">
<p><span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
</div>
<br>
<div>
<img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:left;width:200px;height:200px;">
<p><span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</p>
</div>
<br>
<br>
<div>
<img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:right;width:200px;height:200px;">
<p><span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
</div>
<br>
<hr>
<div>
<h3>Address</h3>
<i class="material-icons" style="color:red;">location_on</i><span id="txt1">Address,County,City,District</span>
</div>
</div>
</div>
</div>
<div class="footer">
<a href="">
<h3>Gep Learning Management Sytem</h3>
</a>
</div>
</div>
</div>
答案 0 :(得分：3)
在您的navbar-brand上，添加mx-auto的类
<a class="navbar-brand mx-auto" asp-controller="Home" asp-action="Index"><i class="fa
fa-cubes"></i> GEP <span class="header-logo-text">Learning Management
System</span></a>
然后，在CSS中，删除您添加到padding-left的{{1}}。
.navbar-brand关于徽标和学校名称之间的间隔，您可以在{{1}中添加.navbar-brand {
/*padding-left: 450px;*/
}
，mr-1或mr-2（或4或5）类}}，具体取决于您想要的空间。
mr-3 img将内容居中。
<img class="img-responsive mr-2" src="/assets/images/school.png" alt="Smiley face" style="float:left; border:2px solid gray; border-radius: 50%; display: inline; width:90px; height:80px; margin-top:60px; margin-left: 20px;">
（或2、3等）添加右边距（因此为“ m”和“ r”）。
查看有关Bootstrap 4间距的文档：https://getbootstrap.com/docs/4.1/utilities/spacing/
我假设您正在使用Bootstrap4。：）
答案 1 :(得分：1)
这是我解决这个问题的方式
hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.alignLeft {
float: left;
}
.indented{padding-left: 50pt; padding-right: 50pt;}
.col-sm-9 {
background-color: white;
}
img {
padding-left: 10px;
width: 100%;
height: 100%;
}
h3 {
text-align: center;
padding-left: 20px;
}
h4, p {
padding-left: 20px;
padding-right: 20px;
text-align: justify !important;
}
.para1 {
text-align: center !important;
}
h4:first-child {
display: inline;
margin-left: 20px !important;
}
h4:nth-child(2) {
text-align: left !important;
}
p:first-child {
text-align: center !important;
}
p:nth-child(3) {
text-align: left !important;
float: left !important;
}
.center3 {
margin: auto;
width: 65%;
margin-bottom: 0;
}
.columns1 {
align-self: center;
justify-content: center;
background-color: white;
margin-bottom: 5px;
padding-bottom: 50px;
}
.thumb {
width: 100px;
height: 100px;
display: inline-block;
border-radius: 50%;
background-image: url(/assets/images/school.png);
background-size: cover;
background-position: center;
margin-top: 60px;
margin-left: 20px;
float: left;
}
.center2{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
justify-content: center;
margin: auto;
width: 65%;
margin-bottom: 0;
}
i.material-icons {
font-size: 16px;
vertical-align: middle;
position: relative;
font-size: 24px;
}
p {
font-size: 17px !important;
}
.center2 .footer {
bottom: 0;
}
.center {
margin: 0 auto;
width: 90%;
padding-left: 300px;
}
.jumbotron {
align-items: center;
background-color: white;
overflow-x: hidden;
}
.navbar {
align-items: center;
}
.center1 {
margin: auto;
width: 50%;
padding-left: 140px;
}
.footer-copyright {
width: 100%;
background-color: gray;
padding-right: 70px;
}
.footer {
font-family: "Roboto", sans-serif;
background-color: grey;
bottom: 0;
margin : auto;
margin-bottom: 0;
position: relative;
z-index: 12;
font-size: 10px;
display: grid;
text-align: center;
margin-left: auto;
margin-right: auto;
text-overflow: ellipsis;
}
.footer a {
background-color: transparent;
}
a {
color: white;
text-align: center;
}
.container-fluid {
background-color: white;
}
@media screen and (max-width: 700px) {
.center2 {
width: 100%;
}
.center3 {
width: 100%;
}
.img-responsive {
width: 100% !important;
}
} <nav class="navbar">
<div class="center3">
<a class="navbar-brand mx-auto" asp-controller="Home" asp-action="Index">
<i class="fa fa-cubes"></i> GEP
<span class="header-logo-text">Learning Management System</span>
</a>
</div>
</nav>
<div class="jumbotron vertical-center">
<div class="row content">
<div class="center2">
<div class="columns1 text-center">
<div class="thumb"></div>
<h4 align="left" style="margin-top: 100px;">
<span style="margin-left: 20px;">School Name</span>
</h4>
<br>
<br>
<br>
<hr>
<section>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
</div>
</section>
<br>
<br>
<section>
<div>
<img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:right;width:400px;height:200px;">
<p>
<span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
</p>
</div>
</section>
<br>
<br>
<br>
<br>
<br>
<section>
<div>
<img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:left;width:400px;height:200px;">
<p>
<span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span>
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</section>
<br>
<br>
<br>
<br>
<section>
<div>
<img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:right;width:400px;height:200px;">
<p>
<span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span>
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</section>
<br>
<br>
<br>
<br>
<section>
<div>
<h3><u>Address</u></h3>
<i class="material-icons" style="color:red; ">location_on</i>
<span id="txt1" style="font-size: 15px;">Address,County,City,District</span>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="footer">
<div>
<a href="">
<h3>Gep Learning Management System</h3>
</a>
</div>
</div>