blocks|key|1047208|text|如果你像引导程序一样考虑“非常小”，这意味着你想用width+<=+768px来影响手机。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1047209|在您的示例中，您可能希望使用媒体查询+(更多关于引导)，如下所示：|1047210|<style>
++++media+(max-width:768px)+{
++++++++/*Css+in+here+will+only+affect+devices+with+a+width+of+<=+768px*/
++++}
</style>|code-block|syntax|javascript|1047211|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries|1|http://getbootstrap.com/css/#grid-media-queries^0|P|E|0|E|4|0|O|2|1|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@$9|10|A|11|1|12]|$9|13|A|14|1|15]]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]|U|$5|P|Q|R|E|$S|V]]]]

<p>If you consider "extra-small" like bootstrap does, this means you want to affect phones with a <code>width &lt;= 768px</code>. <br />In your case, you may want to use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries" rel="nofollow">media queries</a> (more on <a href="http://getbootstrap.com/css/#grid-media-queries" rel="nofollow">bootstrap</a>) like this :</p>

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


blocks|key|1800664|text|使用Reddy声明的媒体查询。基本上，您可以添加媒体查询并键入特定大小的样式。举个例子，我想让我的网站在Ipad上工作，我会使用标签@media+screen+and+(max-width:768px){<styling+here>}并开始相应的样式设计。如果您希望查看它的外观，右键单击、检查/检查元素(取决于铬，im假设您使用的是铬)，则切换设备并选择该设备。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1800665|entityMap^0|1U|1F|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Use Media Queries as stated by Reddy. Basically you add the media query and type your styling for that specific size. Foe example, I want to style such that my website works on the Ipad Mini, I will use the tag <code>@media screen and (max-width:768px){&lt;styling here&gt;}</code> and start styling accordingly. If you wish to see how it will look like, right click, inspect/inspect element (depends on chrome, im assuming you are using chrome) then you toggle devices and select the device</p>


blocks|key|1800678|text|如果您首先考虑移动，您希望标签左对齐，对于比移动电话更大的设备，您希望正确地对齐。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1800679|所以你需要|1800680|@media+(min-width:+768px+)+{
++++.specialtiesHeaderLabel+{
++++++++text-align:+right+!important;
++++}
}|code-block|syntax|javascript|1800681|这意味着标签将左对齐(默认值)，对于设备768+up和up则是对齐的。注意:768+be是引导默认的小屏幕断点，它可以是任意值。|1800682|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>If you think mobile first, you want the label to be left aligned and for devices larger than mobile phones, you want to be right aligned</p>

<p>So you need </p>

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

<p>this means that label will be left aligned(default value) and for  for devices 768px and up will be right aligned. Note: 768px is bootstrap default small screen breakpoint, it can be any value</p>


blocks|key|1800717|text|这应该对你有用。我还建议您阅读：使用媒体查询，以进一步解释媒体查询。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1800718|.specialtiesHeaderLabel+{
++text-align:+right;
++padding-right:+1px;
++color:+#c1c1c1;
}
@media+(max-width:+768px)+{
++.specialtiesHeaderLabel+{
++++text-align:+left;
++}
}|code-block|syntax|javascript|1800719|<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>|1800720|​|1800721|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries^0|G|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>This should work for you. I also recommend you reading: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries" rel="nofollow">Using media queries</a>
for further explanation on media queries.
<div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.specialtiesHeaderLabel {
  text-align: right;
  padding-right: 1px;
  color: #c1c1c1;
}
@media (max-width: 768px) {
  .specialtiesHeaderLabel {
    text-align: left;
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /&gt;

&lt;div class="row"&gt;
  &lt;div class="col-xs-12 col-sm-6"&gt;
    &lt;div class="row"&gt;
      &lt;label class="col-xs-12 col-sm-4 control-label specialtiesHeaderLabel"&gt;Specialties&lt;/label&gt;
      &lt;div class="col-sm-8 col-xs-12"&gt;
        &lt;ul class="control-label resultValueLabel specialtiesValues"&gt;
          &lt;li&gt;
            Hi I'm a Specialty
          &lt;/li&gt;

        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I have a bit of Razor code like this:</p>

<pre><code>if (providerInfo.ProviderSpecialties.Any()) {
    &lt;div class="row"&gt;
      &lt;div class="col-xs-12 col-sm-6"&gt;
        &lt;div class="row"&gt;
          &lt;label class="col-xs-12 col-sm-4 control-label specialtiesHeaderLabel"&gt;Specialties&lt;/label&gt;
          &lt;div class="col-sm-8 col-xs-12"&gt;
            &lt;ul class="control-label resultValueLabel specialtiesValues"&gt;
              @foreach (var specialty in providerInfo.ProviderSpecialties) { if (!string.IsNullOrWhiteSpace(specialty)) {
              &lt;li&gt;
                @specialty
              &lt;/li&gt;
              } }
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
}
</code></pre>

<p>and my CSS is like this:</p>

<pre><code>.specialtiesHeaderLabel {
    text-align: right !important;
    padding-right: 1px;
    color: #c1c1c1 !important;
}
</code></pre>

<p>I do need the <code>specialtiesHeaderLabel</code>   to be right aligned for most of the sizes but when I go to iPhone 5,6 portrait sizes at that point the label is staying still at right side but I want it to now be on <strong>LEFT</strong> side.
How can I tell it to do that?</p>

<p><a href="https://i.stack.imgur.com/oKNgl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oKNgl.png" alt="enter image description here"></a></p>

<p><strong>bad one:</strong>
<a href="https://i.stack.imgur.com/Ab9Oz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ab9Oz.png" alt="enter image description here"></a></p>


Change the text-align from right to left on extra small screens

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一些Razor代码如下：if (providerInfo.ProviderSpecialties.Any()) {    <div class="row">      <div class="col-xs-12 col-sm-6">        <div class="row">          <label ...

问在额外的小屏幕上，将文本从右向左对齐。
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在额外的小屏幕上，将文本从右向左对齐。EN