Question

我无法理解如何使用自举列RIGHT或LEFT侧。我有3列，每列显示文本中的数字。

在中型设备和桌面设备中，我使用class =＆＃34; col-md-12和col-lg-12 text-right＆＃34;将数字放在右侧。这意味着该数字将显示在每列的右侧。

在手机和平板电脑中，我希望该号码显示在左侧，而其他两个设备（中型设备和桌面）由于自动响应而在右侧显示较小。

如何在bootstrap中编写代码以显示左侧列和右侧的数字，这些数字与设备相同，因为每行或每列都是不同的对齐。

Answer 1

不要使用bootstrap构建的类来完成此任务，在这种情况下我们需要通过向CSS添加一些代码来解决。我们将使用一些媒体查询，让我们这样做。

首先，从您的元素中删除text-right类并在其中添加id="alternate"，它看起来就像那样。

<div class="col-md-12 and col-lg-12" id="alternate">
   Some Text
</div>

现在我们将在CSS文件中完成这项工作。此代码示例将大中型设备控制为台式机和平板电脑。从桌面访问时，它会将您的文本显示在右侧。

#alternate
{
  text-align: right;
}

现在，我们将通过添加媒体查询来控制小型设备作为智能手机。将此代码放在同一个CSS文件中。当从智能手机浏览器访问文本时，这将保留您的文本。

@media (max-width: 480px) {

    #alternate
    {
      text-align: left;
    }

}

就是这样，它会起作用。

如果您想专门控制媒体设备，就像上面的媒体查询中使用智能手机一样。您只需添加此类其他媒体查询。当从中型设备访问时，它将占用您的文本中心。

@media (max-width: 768px) {

#alternate

     {
       text-align: center;
     }

}

------------------------- For Knowledge -------------------- -

在bootstrap文档中，您会发现这种情况，一些媒体查询大小适用于多种类型的设备。希望你帮助你。

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Answer 2

很难准确理解您想要做什么，但似乎您需要查看媒体查询，因为它们会根据设备和/或屏幕宽度处理更改css属性。

所以这样的事情可能有所帮助。

＆＃13;

DatabaseError: current transaction is aborted, commands ignored until end of transaction block

＆＃13;

.number-text {
 text-align:left;
}
@media (min-width:1025px) {
 .number-text {
  text-align:right;
}

＆＃13;

设置右侧或左侧的自举

2 个答案: