부트 스트랩 그리드 여백 변경하기

저는 초보자 코더이고 부트 스트랩 그리드를 사용하는 법을 배우고 있습니다. 비록, 나는 컨테이너 마진이 어떻게 작동하는지 잘 이해하지 못했다.부트 스트랩 그리드 여백 변경하기

나는이 부분을 웹 사이트 바닥 글에 썼고 부트 스트랩 그리드를 사용해 보았습니다.하지만 소셜 아이콘이 약 20px가 되길 원했고 얻을 수 없었습니다. Google 크롬에서 요소를 검사하면 오른쪽에 여백이 있음을 알 수 있지만 크기를 사용자 정의하여 작게 만들 수는 없습니다. -

이 봐이 내 바닥 글의 HTML 코드입니다 : 이제

<footer> 
     <div class="row container"> 
      <div class="logo-rodape col-md-2"> 
       <img src="img/logo-principal-white-gota.png" alt="Logo Picada Zero"> 
      </div> 

      <div class="r-content col-md-4"> 
       <p class="slogan-title">CLEAN AND PROTECTION</p> 
       <p class="slogan-sub">Proteção e limpeza para sua família</p> 
      </div> 

      <div class="r-social col-md-5"> 
       <a href="www.facebook.com"><i class="fa fa-facebook fa-2x" aria-hidden="true" style="color:#fff"></i></a> 

       <a href="www.vimeo.com"><i class="fa fa-vimeo fa-2x" aria-hidden="true" style="color:#fff"></i></a> 
      </div> 
     </div> 

    </footer>

이 내 CSS 코드 :

footer{ 
background: url(../img/rodape-background.png); 
clear: both; 
padding: 50px 0; 
} 

footer .container{ 
position: relative; 
margin-left: 80px; 
box-sizing: border-box; 
margin-top: 50px; 
} 

.logo-rodape { 
padding: 0; 
margin: 0 auto; 
box-sizing: border-box; 
display: inline-block; 
} 

.r-content { 
padding: 0; 
box-sizing: border-box; 
display: inline-block; 
text-align: left; 
margin-left: 30px; 
margin-top: 20px; 
} 


.slogan-title { 
font-family: "avenir next condensed"; 
font-size: 0.3em; 
font-size: calc(0.3em + 1vw); 
@include screen-above(800px) { 
    font-size: 0.4em; 
} 
font-weight: 600; 
letter-spacing: 1.5px; 
margin-bottom: -2px; 
color: #fff; 
} 

.slogan-sub { 
font-family: 'Lato', sans-serif; 
font-size: 0.2em; 
font-size: calc(0.2em + 1vw); 
@include screen-above(800px) { 
    font-size: 0.3em; 
} 
font-weight: 300; 
letter-spacing: 1px; 
color: #fff; 
} 

.r-social { 
text-align: right; 
box-sizing: border-box; 
display: inline-block; 
margin-top: 40px; 
margin-left: 60px; 
} 

.fa-facebook { 
padding-right: 20px; 
} 

a i.fa:hover { 
color: #57cdf7; !important; 
}

내가 어떤 제안 정말 드리겠습니다, 나는 밖으로 시도 지금까지 내가 알고있는 모든 것을 올바르게 이해하지 못했습니다.

감사합니다.

출처

2016-09-01 Julia Aguiar

아래에 주어진다.

.container을 다시 정의하기 위해 부트 스트랩 표를 망쳐 놓을 것입니다. 그리고 보았던 것처럼 문제가 있습니다.

가장 좋은 방법은 부트 스트랩 그리드와 관계없이 원하는 곳으로 이동할 수있는 완전히 다른 구성 요소를 만드는 것입니다.

HTML

<div class="social-icons"> 
    <ul> 
    <li>Social Icon</li> 
    <li>Another Icon</li> 
    </ul> 
</div>

CSS 페이지 하단에 사회적 아이콘에 관계없이 스크롤 특히 접착제에

.social-icons { 
    position: fixed; 
    bottom: -10px; 
    right: -5px; 
} 

ul { 
    list-style: none; 
} 

.social-icons li { 
    display: inline; 
    padding-right: 30px; 
    padding-bottom: 20px; 
    width: 100px; 
}

CodePen

이. 그러나 그것은 당신에게 무엇을해야하는지에 대한 아이디어를줍니다.

출처

2016-09-01 21:35:56

감사 Caleb! 그게 내 질문이었고 너는 매우 도움이되었다 :-) –

한 가지 더 질문 : 귀하의 예에서 아이콘은 페이지 하단에 붙어 있었습니까? 위치 속성 값을 변경해야한다고 변경하고 싶다면? –

맞습니다, Julia. 다행스럽게 도울 수있었습니다! –

먼저 컨테이너 안의 모든 콘텐츠를 포장해야합니다. 컨테이너는 다른 크기의 화면에서 적절한 너비로 적절한 위치에 컨텐츠를 유지하기 위해 부트 스트랩에 사전 설정된 클래스입니다.

<div class="container"> 
<footer> 
     <div class="row"> 
      <div class="logo-rodape col-md-2"> 
       <img src="img/logo-principal-white-gota.png" alt="Logo Picada Zero"> 
      </div> 

      <div class="r-content col-md-4"> 
       <p class="slogan-title">CLEAN AND PROTECTION</p> 
       <p class="slogan-sub">Proteção e limpeza para sua família</p> 
      </div> 

      <div class="r-social col-md-6"> 
       <a href="www.facebook.com"><i class="fa fa-facebook fa-2x" aria-hidden="true" style="color:#fff"></i></a> 

       <a href="www.vimeo.com"><i class="fa fa-vimeo fa-2x" aria-hidden="true" style="color:#fff"></i></a> 
      </div> 
     </div> 
    </footer> 
</div> <!--end container-->

또한 COLS 12. COL-MD-2 + COL-MD-4 + COL-MD-6 = COL-MD-12와 동일해야한다. col-md-12는 페이지의 전체 너비입니다. 당신이 "사회적 아이콘으로 마진 권리"패딩 또는 부트 스트랩 CSS에서 컨테이너에 사전 설정입니다 폭이 관리자에 무엇을보고, http://getbootstrap.com/css/

그리고 :

여기 당신을 위해 좋은 읽기입니다.

출처

2016-09-01 21:28:54 Vcasso

감사합니다. 그것을 얻었다 :))) –

먼저 행과 컨테이너 클래스를 별도로 사용하십시오. 둘째, 부트 스트랩 그리드 시스템에 설명 된대로 열이 12와 같아야합니다. 셋째, 왼쪽 여백을 늘리는 오프셋 열을 사용할 수도 있습니다. 예 나는 당신의 질문은 당신이 사회적 아이콘 그리드 부트 스트랩 세트의 경계에 반드시 화면의 맨 오른쪽에 앉아 것을 의미합니다 있으리라 믿고있어

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <title>Bootstrap Example</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"></script> 

    </head> 
     <footer> 
<div class="container "> 
      <div class="row "> 
       <div class="col-md-2"> 
        <img src="img/logo-principal-white-gota.png" alt="Logo Picada Zero"> 
       </div> 

       <div class=" col-md-4"> 
        <p class="slogan-title">CLEAN AND PROTECTION</p> 
        <p class="slogan-sub">Proteção e limpeza para sua família</p> 
       </div> 

       <div class=" col-md-3 col-md-offset-3"> 
        <a href="www.facebook.com"><i class="fa fa-home fa-2x" aria-hidden="true" ></i></a> 

        <a href="www.vimeo.com"><i class="fa fa-vimeo fa-2x" aria-hidden="true"></i></a> 

       </div> 
      </div> 
    </div> 
     </footer>

출처

2016-09-01 21:34:45

Ohhh는 진짜로 도움이되었다! 고마워, 난 열을 상쇄에 대해 몰랐어요 :) –

부트 스트랩 그리드 여백 변경하기

답변

관련 문제