부트 스트랩 - 텍스트를 왼쪽으로 당기기

Question

부트 스트랩 3에서 아이콘이 H6의 왼쪽과 가운데에 있도록하고 싶습니다. 여기

내 코드입니다 :

그것은 이제 (아이콘이 아니라 왼쪽보다, 텍스트 위에있다)이 바로 보이는

<div class="row"> 
    <div class="col-sm-8"> 
     <div class="pull-left"><i class="fa fa-life-ring fa-3x"></i></div> 
     <div class="pull-right"> 
     <h6>Unlimited Support</h6> 
     We're here to help! Just ask away... 
     </div> 
    </div> 
</div> 

:

I가 그것을 얻을 어떻게 형식이 올바 릅니까?

이 코드는이 같은

<div class="row"> 
    <div class="col-sm-8"> 
     <div class="pull-right"> 
      <h6><i class="fa fa-life-ring fa-3x"></i> Unlimited Support</h6> 
      We're here to help! Just ask away... 
     </div> 
    </div> 
</div> 

디스플레이 :

하지만, 텍스트의 두 줄 옆에있는 아이콘을 넣을합니다 ("우리는 여기가 .. . "오른쪽으로 이동/아래로 감싸지 마십시오.

Answer 1

시도해보기 this-

<div class="row"> 
    <div class="col-sm-8"> 
     <div class="pull-right"> 
      <h6><i class="fa fa-life-ring fa-3x"></i> Unlimited Support</h6> 
      We're here to help! Just ask away... 
     </div> 
    </div> 
</div> 

또는 텍스트를 오른쪽으로 끌어 오지 않으려는 경우이 방법을 사용할 수 있습니다.

<div class="row"> 
    <div class="col-sm-8"> 
     <h6><i class="fa fa-life-ring fa-3x"></i> Unlimited Support</h6> 
     We're here to help! Just ask away... 
    </div> 
</div> 

Answer 2

당신은 기간에이

jsFiddle Demo

<div class="media"> 
    <a class="pull-left" href="#"> 
    <img class="media-object" src="..." alt="..."> 
    </a> 
    <div class="media-body"> 
    <h4 class="media-heading">Media heading</h4> 
    ... 
    </div> 
</div> 

Answer 3

텍스트를 넣어 추가 할 수 있습니다 "우리는 여기에 도움이입니다! ..."노력과 약간의 패딩을 제공하거나 수 왼쪽에 여백.

<div class="row"> 
<div class="col-sm-8"> 
    <div class="pull-right"> 
     <h6><i class="fa fa-life-ring fa-3x"></i> Unlimited Support</h6> 
     <span class="text-on-the-right">We're here to help! Just ask away...</span> 
    </div> 
</div> 
</div> 

스팬 클래스에 대한 CSS : 는 .text - 온 - 오른쪽 { 여백 왼쪽 : 10px/* 또는 원하는 폭 */ 은}

Answer 4

은해야 그것처럼 보인다 충분히 간단하지만, 여기에 간다 당신은 ... 어떤 강제 여백 주위에 당신의 요소를 비난해야

<div class="col-sm-6 custom"> 
    <i class="fa fa-camera-retro fa-3x pull-left"></i> 
    <div class="text"> 
    <h6 class="custom-margin">Unlimited Support</h6> 
     We're here to help! Just ask away... 

CSS :

0 12,

는 예 : http://www.bootply.com/qvjfInH7yQ

추신 - 당신의 코드는 "무제한 지원"에 대한 H6를 표시하지만 다른 뭔가처럼 예를 들어, 이미지가 보인다. 저는 h6를 시작점으로 사용했습니다. 그러나 다른 것이 있다면, 정확하게 정확한 위치에 맞추기 위해 여백을 미세하게 조정해야합니다.