的text-align不工作我有一列

在「我的技能」部分，我想對準右邊的技能職稱，旁邊的進度條，就像在Original Theme後。的text-align不工作我有一列

但只要我有一列，文本對齊停止工作。

這裏的Codepen：http://codepen.io/zaky/pen/KdXGEj/

HTML

<head> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> 
</head> 
<body> 
    <!-- Heading --> 
    <h2>Skills</h2> 
    <p>Lorem Ipsum</p> 
    </div> 
<div class="row"> 
    <div class="col-sm-4"> 
    <h2>One <strong>Skills</strong></h2> 
    <p class="mrgBtm20"> 
     Lorem Ipsum    
    </p> 
    <div class="row"> 
     <div class="col-md-2 skilltitle">Axure</div> 
     <div class="col-md-8"> 
     <div class="progress"> 
      <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-2 skilltitle">Photoshop</div> 
     <div class="col-md-8"> 
     <div class="progress"> 
      <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-2 skilltitle">Analytics</div> 
     <div class="col-md-8"> 
     <div class="progress"> 
      <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 
      </div> 
     </div> 
     </div> 
    </div>  
    </div> 
    <div class="col-sm-4"> 
    <h2>Two <strong>Skills</strong></h2> 
    <p class="mrgBtm20"> 
     Lorem Ipsum 
    </p> 
    <div class="row"> 
     <div class="col-md-2 skilltitle">HTML5</div> 
     <div class="col-md-8"> 
     <div class="progress"> 
      <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-2 skilltitle">CSS3</div> 
     <div class="col-md-8"> 
     <div class="progress"> 
      <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"> 
      <span class="sr-only">80% Complete</span> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-2 skilltitle">jQuery</div> 
     <div class="col-md-8"> 
     <div class="progress"> 
      <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-4"> 
    <h2>Three <strong>Skills</strong></h2> 
    <p class="mrgBtm20"> 
     Lorem Ipsum 
    </p> 
    <div class="row"> 
     <div class="col-md-2 skilltitle">Intelligence</div> 
     <div class="col-md-8"> 
     <div class="progress"> 
      <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-2 skilltitle">Pitching</div> 
     <div class="col-md-8"> 
     <div class="progress"> 
      <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-2 skilltitle">Monetizing</div> 
     <div class="col-md-8"> 
     <div class="progress"> 
      <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 
</div>   
</body>

CSS

/*Skills*/ 
.skilltitle { 
text-align: right; 
font-family : 'Roboto', sans-serif; 
font-weight : 700; 

} 
.progress { 
border-radius: 0px; 
height: 15px; 
margin-top: 5px; 
background-color: #D6D6D6; 
margin-left : 20px; 
} 
.progress .progress-bar { 
background-color: #30486A; 
} 
/*Skills*/

來源

2015-10-15 Zaky

你的主題是覆蓋text-align: right;在你的CSS線1023（在媒體查詢）。所以，只要您的瀏覽器寬度低於768px，文本將左對齊。

@media (max-width: 768px){ 
    .skilltitle { 
     text-align: left; 
    } 
}

刪除媒體查詢.skilltitle { text-align: left; }，所以它不會覆蓋以前在你的CSS聲明的text-align: right;。現在，當你有一列時，你的文本應該正確對齊。

來源

2015-10-17 02:19:04

我刪除它，但它仍然堅持到左邊...... – Zaky

Updated 

1. add nopadding class beside col-md-8 like below markup for all skills and add below css to override the default column padding. 

.nopadding { 
    padding: 0 !important; 
    margin: 0 !important; 
} 

Remove the padding of progress class: 
.progress { 

    /* margin-left: 20px; */ remove this and check 
} 


    <div class="row"> 

     <div class="col-md-8 nopadding"> 
     <div class="progress"> 
      <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"> 
      </div> 
     </div> 
     </div> 
    <div class="col-md-2 skilltitle">Photoshop</div> 
    </div>

來源

2015-10-17 07:36:11

我想要的文字留在進度條的左邊，但貼吧，在原來的主題的技能部分。 – Zaky

檢查更新的修復程序 –

感謝您的更新，但它不起作用。文本保持左對齊，現在由進度條覆蓋，如下圖所示：http://hpics.li/ac2b05b – Zaky

的text-align不工作我有一列

回答

相關問題