부트 스트랩 CSS 행 정렬 문제

아래 이미지를보세요 나는이 문제에 대한 몇 시간 동안 내 머리를 건 드리는 봤는데 http://gyazo.com/9dd85e73e331ef035cfad1d8aa8b8d49 부트 스트랩 CSS 행 정렬 문제

, 누군가가 올바른 방향으로 나를 가리킬 수 있다면, 감사합니다!

다음은이

<style type="text/css"> 
     .imgC{ 
      display:inline-block; 
      float:left; 
      padding-right: 5px; 
     } 

     .textC{ 
      display:inline-block; 
      float:left; 
     } 
     .settings { 
      padding: 10px; 
      border-radius: 5px; 
      -moz-border-radius: 5px; 
      background: rgb(243, 243, 243); 
     } 
     .settings:hover { 
      background: rgb(231, 231, 231); 
     } 
     .dashboard-panel-6 { 
      width: 49.5%; 
     } 
    </style> 
</head> 
<body> 
    <div class="container" style="margin-top: 40px;"> 
     <div class="row"> 
      <a href="#"> 
       <div class="col-md-6 dashboard-panel-6 settings"> 
        <div class="imgC"><i class="fa fa-user fa-3x" style="vertical-align:middle;"></i></div> 
        <div class="textC"><span style="font-size: 12pt;">Profile <br></span><span style="color: #979797;font-size:9pt;">Change your basic account, email settings</span></div> 
       </div> 
      </a> 

      <a href="#"> 
       <div class="col-md-6 dashboard-panel-6 pull-right settings"> 
        <div class="imgC"><i class="fa fa-exclamation fa-3x" style="vertical-align:middle;"></i></div> 
        <div class="textC"><span style="font-size: 12pt;">Notifications <br></span><span style="color: #979797;font-size:9pt;">Tell us how to notify you and what you want to know</span></div> 
       </div> 
      </a> 

      <a href="#"> 
       <div class="col-md-6 dashboard-panel-6 settings" style="margin-top: 15px;"> 
        <div class="imgC"><i class="fa fa-lock fa-3x" style="vertical-align:middle;"></i></div> 
        <div class="textC"><span style="font-size: 12pt;">Password <br></span><span style="color: #979797;font-size:9pt;">Change your password</span></div> 
       </div> 
      </a> 
     </div> 
    </div> 
</body>

출처

2014-06-18 user3681580

내 코드 귀하의 반응 크기가 작은 화면 크기에서 하차, 또는 적어도 그게 내가 JSFiddle를 사용하여 발견 무엇이다.

JSFiddle Demo - 결과 창 (오른쪽 아래)을 스트레치 아웃하고 조정 방법을 확인하십시오.

사용 xs 또는 대신 md의 sm 작은 창 크기에 코드를보기.

<div class="col-xs-6 dashboard-panel-6 settings"> 
<div class="col-xs-6 dashboard-panel-6 pull-right settings"> 
<div class="col-xs-6 dashboard-panel-6 settings" style="margin-top: 15px;">

귀하의 코드는 기술적으로 정확하지만 COL-크기는 col-md 또는 경우에 일어날 창문이 sm 아래로 축소하는 경우 중간 크기의 디스플레이, 표시 (또는 크기 조정)되는 즉, 또는 xs 그러나 md 만 지정하면 형식이 달라집니다. xs의 크기가 xs + (일명 xs, sm, md 및 lg 크기를 확장 할 수있는 동안 응답도 확장

, 그래서 위쪽으로 md + (일명 md 및 lg 크기)에 대한 md 의지 크기가 작은 크기와 모든입니다)

이 정보가 도움이 되나요?

출처

2014-06-18 20:13:22 Austin

예! 이것은 완벽하게 작동했습니다! 도와 줘서 고마워! – user3681580

@ user3681580 물론! 진정으로 도움이된다면 다른 사람들도 도움이 될 수 있도록 내 대답을 upvote하고 올바른 것으로 표시하십시오 (체크 표시를 클릭하십시오). :) – Austin

부트 스트랩 CSS 행 정렬 문제

답변

관련 문제