Question

我正在尝试将导航栏保持在容器内部，以便其宽度与内容相同。但是我有2种麻烦，无法解决。

我用渐变设置了部分的全宽和全高，但是您可能会看到波纹管部分不在渐变中。如何使渐变背景全视角端口？
我在容器内设置了导航栏，因此它的宽度可以与下面的内容相同。但是我想将导航栏放置在相同的渐变背景内。问题是我无法在该部分中放置导航栏，因为我正在使用Angular，而导航栏组件位于另一个文件中。

这2种问题有解决方案吗？我在下面的注释中添加了代码示例的链接：

Answer 1

运行下面的代码段，然后选择“整页”以查看较大屏幕的结果。

section {
  background: #2193b0;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #6dd5ed, #2193b0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

   padding-top:5%;
   width:100%;
  /* New code */
   height: 100%;
  overflow: hidden;
  padding-top: 80px;
  margin-top: -80px;
 }

.navbar {
  position: relative;
  background-color. rgba(0, 0, 0, 0);
	 box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
}

.nav-item{
	margin:5px;
}

.signin, .signup {
	border:2px solid;
  
}

.signin {
	border-color:#232323 !important;
}

nav .nav-item ul li a.signin {
	color:#232323;
}

.signin:hover {
	background-color:#232323;
	color:#ffffff;
}

nav .nav-item ul li .signin a :hover {
	color:#ffffff;
}

.signup {
	background-color:#44A423;
	border-color:#44A423;
}
.navbar-light .navbar-nav .nav-item .nav-link {
   
    font-size:23px;
    padding:10px 20px;
}

.navbar-light .navbar-nav .nav-item.signup .nav-link {
    color:#fff;
    font-size:23px;
}



.emp-profile{
     padding: 5%;
     border-radius: 0.5rem;
     background: #fff;
 }
 .profile-img{
     text-align: center;
 }
 .profile-img img{
     width: 70%;
     height: 100%;
 }

 .main-col h5{
     color: #333;
 }
 .main-col h6 {
     color: green;
   margin-bottom:30px
 }
 
 
 .row-details {
   margin-top:30px
 }
 
 
 
 .profile-tab label{
     font-weight: 600;
 }
 .profile-tab p{
     font-weight: 600;
       color: green;
 }
 
  .img-content {
   margin: 30px 15px !important
 }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <div class="container">
<nav class="navbar navbar-expand-md  bg-faded ">
  <a class="navbar-brand" href="#">
    <img src="../assets/images/close.png" class="img-fluid" style="width:50px; height:50px" alt="">
  </a>

    <button class="navbar-toggler" type="button"
          >
    <span class="navbar-toggler-icon"></span>
  </button>


 <div class="collapse navbar-collapse"
      >
    <ul class="navbar-nav ml-auto">
     
      <li class="nav-item">
        <a class="nav-link" routerLink="/home" >Item 1</a>
      </li>

      <li class="nav-item signin">
        <a class="nav-link" routerLink="/sign-in" >Sign in</a>
      </li>

       <li class="nav-item signup">
        <a class="nav-link" routerLink="/sign-up" >Sign Up</a>
      </li>
      
      
    </ul>
  </div>
</nav>
</div>
<section>
      <div class="container">
        <div class="emp-profile justify-content-center">
          <form method="post">
            <div class="row">
              <div class="col-md-4">
                <div class="profile-img">
                  <img src="https://picsum.photos/50" alt="" />
                </div>
              </div>
              <div class="col-md-8 col-sm-12 col-12">
                <div class="tab-content profile-tab" id="myTabContent">
                  <div class="row">
                    <div class="col-md-4 main-col col-sm-12  col-12 d-flex d-sm-block flex-column align-items-center">
                      <h5>
                        Kshiti Ghelani
                      </h5>
                      <h6>
                        24 Years Old
                      </h6>
                    </div>
                    <div class="col-md-3 col-sm-6 col-6">
                      <a href="#" class="btn button-image closeButton btn-match float-right">Follow</a>

                    </div>
                    <div class="col-md-2 col-sm-6 col-6">
                      <a href="#" class="btn button-image closeButton btn-message">Message</a>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-6 d-flex">
                      <label>Username</label>
                      <p class="ml-auto">Kshiti123</p>
                    </div>
                    <div class="col-6 d-flex">
                      <label>Profession</label>
                      <p class="ml-auto">Designer</p>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-6 d-flex">
                      <label>Gender</label>
                      <p class="ml-auto">Female</p>
                    </div>
                    <div class="col-6 d-flex">
                      <label>Job Title</label>
                      <p class="ml-auto">UI Designer</p>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-6 d-flex">
                      <label>Country</label>
                      <p class="ml-auto">UK</p>
                    </div>
                    <div class="col-6 d-flex">
                      <label>City</label>
                      <p class="ml-auto">Oxford</p>
                    </div>
                  </div>



                </div>
              </div>
            </div>
            <div class='row'>
              <div class='col-md-3 img-content'>
                <img src="https://picsum.photos/200" alt="" />
              </div>
              <div class='col-md-3 img-content'>
                <img src="https://picsum.photos/200" alt="" />
              </div>
              <div class='col-md-3 img-content'>
                <img src="https://picsum.photos/200" alt="" />
              </div>
            </div>
            <div class="row">
              <div class="col-md-10">
                <p> Lorem ipsum dolor sit amet, tollit munere quo ne, timeam saperet ea mel. Ad vide essent dolores usu, ponderum salutatus ea duo, est alii commune ea. Pro euismod legimus detracto ad. Ei eius expetenda assueverit vis, cu duo sapientem temporibus,
                  quo minim nostro ut.
                </p>
              </div>
            </div>
          </form>
        </div>
      </div>
    </section>

有点难以确切了解您想做什么。

如何解决Bootstrap 4中内容部分的导航栏问题

1 个答案: