我有一栏后文本对齐不起作用答案

【问题标题】：Text-Align not working after I had one column我有一栏后文本对齐不起作用
【发布时间】：2016-01-14 06:24:44
【问题描述】：

在“我的技能”部分，我想在右侧对齐进度条旁边的技能标题，就像在Original Theme 中一样。

但只要我有一列，文本对齐就停止工作了。

这是 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*/

【问题讨论】：

标签： html twitter-bootstrap css text-align

【解决方案1】：

您的主题正在覆盖 css 中第 1023 行的text-align: right;（在媒体查询中）。因此，只要您的浏览器宽度低于 768px，文本就会向左对齐。

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

删除媒体查询中的.skilltitle { text-align: left; }，这样它就不会覆盖您之前在css中声明的text-align: right;。现在，当您有一列时，您的文本应该正确对齐。

【讨论】：

【解决方案2】：

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>

【讨论】：

我希望文本保持在进度条的左侧，但要坚持下去，就像在原始主题的技能部分中一样。
感谢您的更新，但它不起作用。文本保持左对齐，现在被进度条覆盖，如您在此屏幕截图中所见：hpics.li/ac2b05b