Html 在超小屏幕上更改文本从右向左对齐

我有一个类似这样的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>
}

.specialtiesHeaderLabel {
    text-align: right !important;
    padding-right: 1px;
    color: #c1c1c1 !important;
}

我确实需要将大部分尺寸的

specialtiesHeaderLabel

右对齐，但当我使用iPhone 5,6人像尺寸时，标签仍保持在右侧，但我希望它现在位于左侧。 我怎么能让它这么做

坏消息：

---

如果你考虑Bootstrap这样的“超小”，这意味着你想用一个<代码>宽度> P>来影响手机。如果你认为Bootstrap确实是“超小”的话，这意味着你想用一个<>代码>宽度> p>使用Reddy所说的媒体查询。基本上，您可以添加媒体查询并键入特定大小的样式。例如，我想让我的网站在Ipad Mini上运行，我将使用标签

@媒体屏幕和（最大宽度：768px）{}

，并开始相应的样式设置。如果您希望看到它的外观，请右键单击inspect/inspect element（取决于chrome，我假设您正在使用chrome），然后切换设备并选择设备，如Reddy所述使用媒体查询。基本上，您可以添加媒体查询并键入特定大小的样式。例如，我想让我的网站在Ipad Mini上运行，我将使用标签

@媒体屏幕和（最大宽度：768px）{}

，并开始相应的样式设置。如果您希望看到它的外观，请右键单击inspect/inspect element（取决于chrome，我假设您正在使用chrome），然后切换设备并选择设备

如果您首先考虑移动，则希望标签左对齐，对于比移动电话大的设备，则希望右对齐

所以你需要

@media (min-width: 768px ) {
    .specialtiesHeaderLabel {
        text-align: right !important;
    }
}

---

这意味着标签将左对齐（默认值），对于768px及以上设备，标签将右对齐。注意：768px是引导默认的小屏幕断点，它可以是任何值

如果您首先考虑移动，您希望标签左对齐，对于大于移动电话的设备，您希望右对齐

所以你需要

@media (min-width: 768px ) {
    .specialtiesHeaderLabel {
        text-align: right !important;
    }
}

---

这意味着标签将左对齐（默认值），对于768px及以上设备，标签将右对齐。注意：768px是引导默认的小屏幕断点，它可以是任何值

这应该适合您。我还建议你阅读： 有关媒体查询的进一步解释。

.specialtiesHeaderLabel{
文本对齐：右对齐；
右侧填充：1px；
颜色：#C1C1；
}
@介质（最大宽度：768px）{
.specialtiesHeaderLabel{
文本对齐：左对齐；
}
}

特产


嗨，我是特产

这应该适合您。我还建议你阅读： 有关媒体查询的进一步解释。

.specialtiesHeaderLabel{
文本对齐：右对齐；
右侧填充：1px；
颜色：#C1C1；
}
@介质（最大宽度：768px）{
.specialtiesHeaderLabel{
文本对齐：左对齐；
}
}

特产


嗨，我是特产

@Reddy我需要这方面的帮助，我没听说过也没用过。我对这一切都不熟悉。好的，检查这个链接，你需要把你的风格放进去。。这有用吗？@Reddy我需要帮助，我没听说过也没用过。我对这一切都不熟悉。好的，检查这个链接，你需要把你的风格放进去。。这有帮助吗？我做了，从他的链接中复制了查询，开始者说ok，将该类的颜色更改为黄色，做了Chrome模拟，但没有任何改变。我也有关系！对于正确对齐很重要？您是否检查了是否使用了正确的类/id进行了样式设置？可能您选择了错误的元素或错误地设置了样式？除了通过chrome inspect按钮更改外，您还可以使用并手动更改chrome窗口的大小。您应该使用！重要的是非常谨慎。除非您使用的是上面或下面的id选择器！重要的是，媒体查询中的类选择器应该覆盖属性。我做了，从他的链接复制了查询，开始者说ok，将该类的颜色更改为黄色，做了Chrome模拟操作，但没有更改任何内容。我也有关系！对于正确对齐很重要？您是否检查了是否使用了正确的类/id进行了样式设置？可能您选择了错误的元素或错误地设置了样式？除了通过chrome inspect按钮更改外，您还可以使用并手动更改chrome窗口的大小。您应该使用！重要的是非常谨慎。除非您使用的是上面或下面的id选择器！重要信息：媒体查询中的类选择器应覆盖属性。