내 바닥 글 맞춤

중간에 꼬리말을 만들려고하는데, 3 개의 열이 3 개의 열로 하나의 열로 표시되어야하며, 페이지의 중앙 부분에서이를 수행해야합니다.내 바닥 글 맞춤

하지만 아래의 코드 link 링크에서 볼 수 있다면 두 번째 것은 맨 아래로 정렬하지 않습니다.

https://codepen.io/Sunny143/pen/VybbGX?editors=1100

footer { 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
    background-color: #305C7A; 
 
    position: absolute; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
footer h3 { 
 
    color: white; 
 
    text-decoration: underline; 
 
    text-decoration-color: white; 
 
} 
 

 
footer p { 
 
    color: white; 
 
    width: 100%; 
 
    align-content: center; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
footer span { 
 
    color: white; 
 
} 
 

 
.address { 
 
    float: left; 
 
    padding: 35px; 
 
    padding-bottom: 50px; 
 
    width: 30%; 
 
    margin-left: 4%; 
 
    margin-right: 4%; 
 
} 
 

 
.Main-address { 
 
    float: left; 
 
    width: 30%; 
 
    padding: 35px; 
 
    text-align: left; 
 
    margin-left: 4%; 
 
    margin-right: 4%; 
 
} 
 

 
.contact-info { 
 
    float: left; 
 
    position: relative; 
 
    padding-bottom: 50px; 
 
    padding: 35px; 
 
    width: 30%; 
 
    text-align: left; 
 
    margin-left: 4%; 
 
    margin-right: 4%; 
 
    margin-bottom: 35px; 
 
} 
 

 
.copyright { 
 
    position: absolute; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    height: 35px; 
 
    background-color: #111B22; 
 
    align-items: center; 
 
    margin-bottom: 0%; 
 
}

<footer> 
 
    <!-- starting of a footer--> 
 
    <section class="address col-lg-3 col-md-12 col-sm-12"> 
 
    <h3>Branch Office</h3> 
 
    <span class="Name">SambaSiva Rao Muvva</span><br> 
 
    <span class="qual">B.com., A.C.A</span> 
 
    <p>23-5-93, Besides Bank of India<br> Naidupet 1st lane<br> Koritepadu, Guntur-7</p> 
 
    </section> 
 
    <section class="Main-address col-lg-3 col-md-12 col-sm-12"> 
 
    <h3>Head Office</h3> 
 
    <span class="Name">Konduru Anil Kumar</span><br> 
 
    <span class="qual">B.com., A.C.A</span> 
 
    <p>No 4, 2nd floor<br> Rangarajulu Street, Ayyavoo colony<br> Aminjikarai, Chennai-29</p> 
 
    </section> 
 
    <Section class="contact-info col-lg-3 col-md-12 col-sm-12"> 
 
    <h3>Contact Information</h3> 
 
    <span class="ph">Ph.No:</span><span class="numbers"> xxx-xxxxxxx<br>+91 9985985473<br>+91 8125173473</span><br> 
 
    <span class="Email-ID">Email :</span><span class="email">[email protected]</span> 
 
    </Section> 
 
    <p class="text-center copyright">Copyright @ 2017 indusfilings.com</p> 
 
</footer>

3은 플로팅되기 때문에, 블록의

출처

2017-12-30 G. Santosh

당신은'd-lg-flex flex-lg-column align-items-lg-cen 말 '꼬리말에? – Jhecht

중에 중심되지 않고 단순히 제 아래로 세 번째를 추진 처음으로 플로팅 문제에 직면 이 질문에서 읽을 수있는 사람 : Floated elements of variable height push siblings down

대신에 단순히 float을 제거하고 부트 스트랩 클래스 (컨테이너/행)를 올바르게 사용해야하고 r div가 올바르게 작동합니다. LG 전자의 중단 점에 도달 할 때 그럼 당신은 text-align:center을 추가 할 수 있습니다 :

footer { 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
    background-color: #305C7A; 
 
    position: absolute; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
footer h3 { 
 
    color: white; 
 
    text-decoration: underline; 
 
    text-decoration-color: white; 
 
} 
 

 
footer p { 
 
    color: white; 
 
    width: 100%; 
 
    align-content: center; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
footer span { 
 
    color: white; 
 
} 
 

 
.address,.contact-info,.Main-address { 
 
    padding: 35px; 
 
} 
 

 
.copyright { 
 
    width: 100%; 
 
    height: 35px; 
 
    background-color: #111B22; 
 
    align-items: center; 
 
    margin-bottom:0; 
 
} 
 

 
@media all and (max-width:991px) { 
 
.address,.contact-info,.Main-address { 
 
    text-align:center; 
 
} 
 

 
}

<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css"> 
 
<footer> 
 
    <div class="container"> 
 
    <div class="row justify-content-around"> 
 
     <!-- starting of a footer--> 
 
     <section class="address col-lg-3 col-md-12 col-sm-12"> 
 
     <h3>Branch Office</h3> 
 
     <span class="Name">SambaSiva Rao Muvva</span><br> 
 
     <span class="qual">B.com., A.C.A</span> 
 
     <p>23-5-93, Besides Bank of India<br> Naidupet 1st lane<br> Koritepadu, Guntur-7</p> 
 
     </section> 
 
     <section class="Main-address col-lg-3 col-md-12 col-sm-12"> 
 
     <h3>Head Office</h3> 
 
     <span class="Name">Konduru Anil Kumar</span><br> 
 
     <span class="qual">B.com., A.C.A</span> 
 
     <p>No 4, 2nd floor<br> Rangarajulu Street, Ayyavoo colony<br> Aminjikarai, Chennai-29</p> 
 
     </section> 
 
     <Section class="contact-info col-lg-3 col-md-12 col-sm-12"> 
 
     <h3>Contact Information</h3> 
 
     <span class="ph">Ph.No:</span><span class="numbers"> xxx-xxxxxxx<br>+91 9985985473<br>+91 8125173473</span><br> 
 
     <span class="Email-ID">Email :</span><span class="email">[email protected]</span> 
 
     </Section> 
 
    </div> 
 
    </div> 
 
    <p class="text-center copyright">Copyright @ 2017 indusfilings.com</p> 
 
</footer>

출처

2017-12-30 07:53:32

솔루션을 제공해 주셔서 감사합니다. –

1)이 반응 라이브러리를 사용하는 목적을 물리 칠 것 부트 스트랩의 상단에 사용자 정의 레이아웃 CSS를 사용하지 마십시오.

예 :

position:absolute; 
float:left; 
width:30%;

2) 성분의 적절한 구현을 위해 부트 스트랩 페이지에 제공된 지침에 따라. 이 경우 위의 문제에 대한
link -> Grid system Bootstrap

솔루션은 아래 링크 https://codepen.io/YasirKamdar/pen/ypbXVg

HTML

<footer> 
    <!-- starting of a footer--> 
    <div class="row"> 
     <section class="address col-lg-4 col-md-12 col-sm-12"> 
     <h3>Branch Office</h3> 
     <span class="Name">SambaSiva Rao Muvva</span><br> 
     <span class="qual">B.com., A.C.A</span> 
     <p>23-5-93, Besides Bank of India<br> 
    Naidupet 1st lane<br> 
    Koritepadu, Guntur-7</p> 
</section> 
<section class="Main-address col-lg-4 col-md-12 col-sm-12"> 
    <h3>Head Office</h3> 
    <span class="Name">Konduru Anil Kumar</span><br> 
    <span class="qual">B.com., A.C.A</span> 
    <p>No 4, 2nd floor<br> 
    Rangarajulu Street, Ayyavoo colony<br> 
    Aminjikarai, Chennai-29</p> 
</section> 
<Section class="contact-info col-lg-4 col-md-12 col-sm-12"> 
    <h3>Contact Information</h3> 
    <span class="ph">Ph.No:</span><span class="numbers"> xxx-xxxxxxx<br>+91 9985985473<br>+91 8125173473</span><br> 
    <span class="Email-ID">Email :</span><span class="email">[email protected]</span> 
</Section> 
    </div> 
<p class="text-center copyright">Copyright @ 2017 indusfilings.com</p> 
</footer>

CSS

footer{ 
    margin-left:0; 
    margin-right:0; 
    background-color:#305C7A; 
    bottom:0px; 
    width:100%; 
    height:auto; 
} 
    footer h3{ 
    color:white; 
    text-decoration:underline; 
    text-decoration-color:white; 
} 
.address, .Main-address, .contact-info { 
    padding-left: 35px; 
} 
    footer p{ 
    color:white; 
    width:100%; 
    align-content:center; 
    align-items: center; 
    justify-content: center; 
} 
    footer span{ 
    color:white; 
} 
.copyright{ 
    bottom:0px; 
    width:100%; 
    height:35px; 
    background-color:#111B22; 
    align-items:center; 
    margin-bottom: 0%; 
}

에서 찾을 수있는 "행"블록을 누락

출처

2017-12-30 08:58:57 Yasir

답변

관련 문제