如何让子元素在Bootstrap 4中继承父元素的宽度

时间：2018-03-07 16:04:10

标签： css twitter-bootstrap

如何使用Bootstrap 4使子元素继承父级宽度。

我需要修复download_resume块的宽度。

我使用了两个主要的js脚本。

1 .First function img like hover effect

2 。第二个功能将粘性类添加到我们的empty_row块中，使其成为position fixed

请在宽屏幕设备或codepen中查看此代码，以了解问题和我想要实现的内容

＆＃13;
＆＃13; 
// this function change img like hover effect using js
let avatarSimple = document.querySelector(".avatar_simple");
let avatarQuantumBreak = document.querySelector(".avatar_quantum_break");

avatarQuantumBreak.style.opacity = "0";

let hover = () => {
	avatarQuantumBreak.style.opacity = "1";
}
let normal = () => {
	avatarQuantumBreak.style.opacity = "0";
}
// this function adding sticky class to our empty_row block make it position fixed
window.onscroll = function() {
  let w = document.documentElement.clientWidth;
  if (w > 940) {
  	 var scrolled = window.pageYOffset || document.documentElement.scrollTop;
  	 scrolled >= 20 ? document.querySelector(".empty_row").classList.add("sticky") : document.querySelector(".empty_row").classList.remove("sticky");
  }
}
＆＃13; 
.other_block {
  background-color:lightblue;
}
.main_wrap {
  margin-top:15px;
  background-color:pink;
  height:600px;
}

.home_link , .main_text {
	color: #fff;
	font-size: 1.5em;
}
.left_block {
  /*height: 60%;*/
  padding: 30px 20px 20px;
  box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2); 
}
.avatar {
  position: relative;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  height: 195px;
}
.avatar_simple,
.avatar_quantum_break {
  position: absolute;
  display: block;
  text-align:center;
  transition: opacity 1s ease-out;
}
.avatar .avatar_simple img,
.avatar .avatar_quantum_break img {
  border-radius: 50%;
  display: inline-block;
}
.info {
  margin-top: 33px;
}
.text_uppercase {
  text-transform: uppercase;
  color: #fff;
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 15px;
}
.text_muted {
  text-align: center;
  opacity: 0.65;
}
.social_links {
  display: flex;
  justify-content: center;
}
.social_links li {
  list-style-type: none;
  margin: 5px 12px;
  vertical-align: middle;
}
.social_links li a {
  color: #fff;
  cursor: pointer;
  transition: all .2s ease-out;
  background-color: transparent;
}
.social_links li a i {
  font-size: 1.25em;
  transition: all .2s ease-out;
}
.social_links li a i:hover {
  opacity: 0.65;
}
.download_resume {
  position:absolute;
  width: 100%;
  left: 0%;
  padding: 30px;
  margin: 0;
  font-size: .875em;
  background-color: #313C42;
  box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2);
}

.text_widget {
  vertical-align: middle;
}
.text_widget a {
  background-color: #DEC746 !important;
  border-color: #DEC746 !important;
  color: #000 !important;
  font-size: 15px !important;
  padding: 12px 30px !important;
  border-radius: 35px !important;
}
center {
  display: block;
  text-align: -webkit-center;
}
.btn_link:hover, .share-btn:hover {
  box-shadow: -1px 2px 4px rgba(0,0,0,.25);
}
.btn_link {
  font-weight: 700 !important;
}
.sticky {
  position: fixed !important;
  top: 2%;
  width: 285px;
}
＆＃13; 
<div class="container">
<div class="row justify-content-between">
  <div class="col-lg-3 col-xl-3 any_block"><div class="empty_row left_block" style="background-color: #1FA184;">
            <div class="avatar" onmouseover="hover();" onmouseout="normal();">
              <span class="avatar_simple">
                <img  src="https://certy.px-lab.com/developer/wp-content/uploads/sites/6/2017/08/certy-programmer-1-195x195.png">
              </span>
              <span class="avatar_quantum_break">
                <img src="https://certy.px-lab.com/developer/wp-content/uploads/sites/6/2017/08/certy-programmer-2-195x195.png">
              </span>
            </div>
            <div class="info">
              <h2 class="text_uppercase">Sergio Ramos</h2>
              <p class="text_muted">Front End Developer</p>
              <ul class="social_links">
                <li>
                  <a href="#">
                    <i class="fa fa-facebook"></i>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fa fa-linkedin"></i>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fa fa-github"></i>
                  </a>
                </li>
              </ul>
            </div>
            <div class="download_resume">
              <div class="text_widget">
                <center>
                  <a href="#" class="btn btn-primary btn-lg btn_link">Download CV</a>
                </center>
              </div>
            </div>
          </div></div>
  <div class="col-lg-8 col-xl-8 other_block">
    <div class="main_wrap">text</div>
  </div>
</div>
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

设置要继承的宽度不是最佳解决方案。当你没有＆＃34;粘＆＃34;在它上面做你不期望的事情。

我已经添加了一个额外的div来包装你的顶部部分。当你从粘性移动到非粘性时，你真的只关心用你的照片留下那个顶部的填充物。这将它与简历下载按钮分开。然后你不需要在那个div上指定任何宽度，因为它会像预期的那样工作。

HTML （我已添加＆＃34;左块填充＆＃34; div）

<div class="container">
<div class="row justify-content-between">
  <div class="col-lg-3 col-xl-3 any_block"><div class="empty_row left_block" style="background-color: #1FA184;">
        <div class="left-block-padding">
            <div class="avatar" onmouseover="hover();" onmouseout="normal();">
              <span class="avatar_simple">
                <img  src="https://certy.px-lab.com/developer/wp-content/uploads/sites/6/2017/08/certy-programmer-1-195x195.png">
              </span>
              <span class="avatar_quantum_break">
                <img src="https://certy.px-lab.com/developer/wp-content/uploads/sites/6/2017/08/certy-programmer-2-195x195.png">
              </span>
            </div>
            <div class="info">
              <h2 class="text_uppercase">Sergio Ramos</h2>
              <p class="text_muted">Front End Developer</p>
              <ul class="social_links">
                <li>
                  <a href="#">
                    <i class="fa fa-facebook"></i>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fa fa-linkedin"></i>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fa fa-github"></i>
                  </a>
                </li>
              </ul>
            </div>
    </div>
            <div class="download_resume">
              <div class="text_widget">
                <center>
                  <a href="#" class="btn btn-primary btn-lg btn_link">Download CV</a>
                </center>
              </div>
            </div>
          </div></div>
  <div class="col-lg-8 col-xl-8 other_block">
    <div class="main_wrap">text</div>
  </div>
</div>
</div>

CSS （已添加.left-block-padding并已从position:absolute;

中移除width: 100%;和.download_resume 
.other_block {
  background-color:lightblue;
}
.main_wrap {
  margin-top:15px;
  background-color:pink;
  height:600px;
}

.home_link , .main_text {
    color: #fff;
    font-size: 1.5em;
}
.left_block {
  /*height: 60%;*/
  box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2); 
}
.avatar {
  position: relative;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  height: 195px;
}
.avatar_simple,
.avatar_quantum_break {
  position: absolute;
  display: block;
  text-align:center;
  transition: opacity 1s ease-out;
}
.avatar .avatar_simple img,
.avatar .avatar_quantum_break img {
  border-radius: 50%;
  display: inline-block;
}
.info {
  margin-top: 33px;
}
.text_uppercase {
  text-transform: uppercase;
  color: #fff;
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 15px;
}
.text_muted {
  text-align: center;
  opacity: 0.65;
}
.social_links {
  display: flex;
  justify-content: center;
}
.social_links li {
  list-style-type: none;
  margin: 5px 12px;
  vertical-align: middle;
}
.social_links li a {
  color: #fff;
  cursor: pointer;
  transition: all .2s ease-out;
  background-color: transparent;
}
.social_links li a i {
  font-size: 1.25em;
  transition: all .2s ease-out;
}
.social_links li a i:hover {
  opacity: 0.65;
}
.download_resume {
  left: 0%;
  padding: 30px;
  margin: 0;
  font-size: .875em;
  background-color: #313C42;
  box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2);
}

.text_widget {
  vertical-align: middle;
}
.text_widget a {
  background-color: #DEC746 !important;
  border-color: #DEC746 !important;
  color: #000 !important;
  font-size: 15px !important;
  padding: 12px 30px !important;
  border-radius: 35px !important;
}
center {
  display: block;
  text-align: -webkit-center;
}
.btn_link:hover, .share-btn:hover {
  box-shadow: -1px 2px 4px rgba(0,0,0,.25);
}
.btn_link {
  font-weight: 700 !important;
}
.sticky {
  position: fixed !important;
  top: 2%;
  width: 285px;
}

.left-block-padding {
  padding: 30px 20px 20px;
}

JS （未更改）

// this function change img like hover effect using js
let avatarSimple = document.querySelector(".avatar_simple");
let avatarQuantumBreak = document.querySelector(".avatar_quantum_break");

avatarQuantumBreak.style.opacity = "0";

let hover = () => {
    avatarQuantumBreak.style.opacity = "1";
}
let normal = () => {
    avatarQuantumBreak.style.opacity = "0";
}
// this function adding sticky class to our empty_row block make it position fixed
window.onscroll = function() {
  let w = document.documentElement.clientWidth;
  if (w > 940) {
     var scrolled = window.pageYOffset || document.documentElement.scrollTop;
     scrolled >= 20 ? document.querySelector(".empty_row").classList.add("sticky") : document.querySelector(".empty_row").classList.remove("sticky");
  }
}

https://codepen.io/adprocas/pen/QmLjJM

答案 1 :(得分：0)

使用width：inherit继承父元素的宽度

.download_resume {
  position:absolute;
  width: inherit;
  left: 0%;
  padding: 30px;
  margin: 0;
  font-size: .875em;
  background-color: #313C42;
  box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2);
}

代码示例 - https://codepen.io/nagasai/pen/xWKGvW

相关问题
最新问题