将导航栏品牌与页面对齐

时间：2018-08-08 14:55:56

标签： html css

我在这里有此页面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>

2 个答案:

答案 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>

相关问题
最新问题