在额外的小屏幕上，将文本从右向左对齐。
在额外的小屏幕上，将文本从右向左对齐。
提问于 2016-05-20 13:37:32
我有一些Razor代码如下：
if (providerInfo.ProviderSpecialties.Any()) {
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="row">
<label class="col-xs-12 col-sm-4 control-label specialtiesHeaderLabel">Specialties</label>
<div class="col-sm-8 col-xs-12">
<ul class="control-label resultValueLabel specialtiesValues">
@foreach (var specialty in providerInfo.ProviderSpecialties) { if (!string.IsNullOrWhiteSpace(specialty)) {
<li>
@specialty
</li>
} }
</ul>
</div>
</div>
</div>
</div>
}我的CSS是这样的
.specialtiesHeaderLabel {
text-align: right !important;
padding-right: 1px;
color: #c1c1c1 !important;
}我确实需要specialtiesHeaderLabel在大部分尺寸上对齐，但是当我选择iPhone 5,6肖像尺寸时，标签保持在右边，但我希望它现在位于左一侧。我怎么能让它这么做？
坏的一个：
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-05-20 14:41:39
这应该对你有用。我还建议您阅读：使用媒体查询，以进一步解释媒体查询。
.specialtiesHeaderLabel {
text-align: right;
padding-right: 1px;
color: #c1c1c1;
}
@media (max-width: 768px) {
.specialtiesHeaderLabel {
text-align: left;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="row">
<label class="col-xs-12 col-sm-4 control-label specialtiesHeaderLabel">Specialties</label>
<div class="col-sm-8 col-xs-12">
<ul class="control-label resultValueLabel specialtiesValues">
<li>
Hi I'm a Specialty
</li>
</ul>
</div>
</div>
</div>
</div>
Stack Overflow用户
发布于 2016-05-20 13:45:24
如果你像引导程序一样考虑“非常小”，这意味着你想用width <= 768px来影响手机。
在您的示例中，您可能希望使用媒体查询 (更多关于引导)，如下所示：
<style>
media (max-width:768px) {
/*Css in here will only affect devices with a width of <= 768px*/
}
</style>Stack Overflow用户
发布于 2016-05-20 13:46:17
使用Reddy声明的媒体查询。基本上，您可以添加媒体查询并键入特定大小的样式。举个例子，我想让我的网站在Ipad上工作，我会使用标签@media screen and (max-width:768px){<styling here>}并开始相应的样式设计。如果您希望查看它的外观，右键单击、检查/检查元素(取决于铬，im假设您使用的是铬)，则切换设备并选择该设备。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37348191
复制相关文章
相似问题
腾讯云开发者
