Question

我有一些像这样的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肖像尺寸时，标签仍保持在右侧，但我现在想要它在 LEFT 方面。我怎么能告诉它呢？

糟糕的一个：

Answer 1

这对你有用。我还建议你阅读：Using media queries 有关媒体查询的进一步说明。

＆＃13;

.specialtiesHeaderLabel {
  text-align: right;
  padding-right: 1px;
  color: #c1c1c1;
}
@media (max-width: 768px) {
  .specialtiesHeaderLabel {
    text-align: left;
  }
}

＆＃13;

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

＆＃13;

Answer 2

如果你考虑＆＃34;超小＆＃34;像bootstrap一样，这意味着你想要影响width <= 768px的手机。
在您的情况下，您可能希望使用media queries（bootstrap上的更多内容），如下所示：

<style>
    media (max-width:768px) {
        /*Css in here will only affect devices with a width of <= 768px*/
    }
</style>

Answer 3

使用Reddy所述的媒体查询。基本上，您添加媒体查询并为特定大小键入样式。例如，我想要设计样式，使我的网站在Ipad Mini上运行，我将使用标签@media screen and (max-width:768px){<styling here>}并相应地开始样式化。如果您希望看到它的外观，请右键单击，检查/检查元素（取决于chrome，我假设您正在使用chrome）然后切换设备并选择设备

Answer 4

如果您认为移动设备是第一个，您希望标签保持对齐状态，而对于比移动电话更大的设备，则需要正确对齐

所以你需要

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

这意味着标签将保持对齐（默认值），对于设备768px和up将右对齐。注意：768px是bootstrap默认的小屏幕断点，它可以是任何值

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

4 个答案: