根据Bootstrap 4中的移动设备更改文本对齐方式

Question

我有一个水平标签和文本字段。当我在小型设备上显示时，它像波纹管图像一样显示。.

我想在小型设备中以左对齐方式显示名字。我使用了波纹管代码

 <div class="row">
    <div class="col-sm-4 text-right">
        <label for="firstname" class="control-label text-right">First Name :</label>
     </div>
      <div class="col-sm-6">
        <input type="text" class="form-control" placeholder="Enter Your First Name"  />                 
      </div>

请帮助我。

Answer 1

仅使用引导程序

---

<div class="row">
    <div class="col-sm-4 text-md-right text-sm-left" >
        <label for="firstname" class="control-label">First Name :</label>
     </div>
      <div class="col-sm-6">
        <input type="text" class="form-control" placeholder="Enter Your First Name"  />                 
      </div>

Answer 2

引导程序没有内置任何功能，但是一些简单的CSS可以解决此问题。这样的事情应该起作用。

<div class="row">
    <div class="col-sm-4 text-right mob-text-left">
        <label for="firstname" class="control-label text-right">First Name :</label>
     </div>
      <div class="col-sm-6">
        <input type="text" class="form-control" placeholder="Enter Your First Name"  />                 
      </div>



@media (max-width: 768px) {
      .mob-text-left {
              text-align: left;
       } 
    }