在“我的技能”部分，我想在右侧对齐技能标题，紧挨着进度条，就像在 Original Theme 中一样.
但是一旦我有了一个列，文本对齐就停止工作了。
这是代码笔: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*/
最佳答案
您的主题正在覆盖您的 css(在媒体查询中)第 1023 行的 text-align: right;。因此，只要您的浏览器宽度低于 768 像素，文本就会向左对齐。
@media (max-width: 768px){
.skilltitle {
text-align: left;
}
}
删除 .skilltitle { text-align: left; } 在媒体查询中，因此它不会覆盖 text-align: right; 您之前在 css 中声明的。现在，当您只有一列时，您的文本应该正确对齐。
关于html - 文本对齐在我有一列后不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33154564/