的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不工作我有一列

回答

相关问题