Question

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

但是只要我有一个列，text-align就会停止工作。

这是Codepen：http://codepen.io/zaky/pen/KdXGEj/

HTML

    itemList =>
    {
         return IsItemListConstainsToyota(itemList);
    }

CSS

<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>

Answer 1

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

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

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

Answer 2

I, <span type="text" id="printownername" class="underline contenteditable"
contenteditable="true" data-placeholder="Please Type Name"
data-focused-advice="Start typing"></span>, of legal age,
<span class="annotate"><span type="text" id="printownercitizenship"
contenteditable="true" data-placeholder="Please Type Citizenship"
class="underline contenteditable" data-focused-advice="Start typing"></span>
<small>(Citizenship)</small></span>
<span class="annotate"><span type="text" id="printownercivilstatus"
class="underline contenteditable" data-placeholder="Please Type Civil Status" 
contenteditable="true" data-focused-advice="Start typing"></span>
<small>(Civil Status)</small></span>
and with postal address at<br>
<span type="text" id="printowneraddress" class="underline contenteditable"
contenteditable="true" data-placeholder="Please type"
data-focused-advice="Start typing"></span>,
after having been duly sworn to in accordance with law hereby depose and say:<br>
<br>

文本 - 在我有一列后对齐不起作用

2 个答案: