Question

当宽度小于579px时，如何将行调整为内联？我需要它在移动设备上与台式机上相同。

 "styles": [
    "../node_modules/font-awesome/scss/font-awesome.scss",
    "../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
    "../node_modules/angular-bootstrap-md/scss/mdb-free.scss",
    "styles.scss",
    "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css"
  ],

<div class="card-body text-left">
  <div class="container">
    <div class="row">
      <div class="col-md-5 col-xs-5 col-sm-5  col-lg-5">
        {{contact.firstName}} {{contact.lastName}}
      </div>
      <div class="col-md-1 col-xs-1 col-sm-1  col-lg-1 ">
        <a href="http://maps.google.com/?q={{address}}" target="_blank">
          <i class="fa fa-map-marker" title="{{address}}"></i>
        </a>
      </div>
      <div class="col-md-1 col-xs-1 col-sm-1  col-lg-1 ">
        <a href="tel:{{contact.phoneNumber}}">
          <i class="fa fa-phone" title="{{contact.phoneNumber}}">
          </i>
        </a>
      </div>
      <div class="col-md-1 col-xs-1 col-sm-1  col-lg-1 ">
        <a href="mailto:{{contact.email}}">
          <i class="fa fa-envelope" title="{{contact.email}}">
          </i>
        </a>
      </div>
      <div class="col-md-2 col-xs-2 col-sm-2  col-lg-2 ">
      </div>

      <div class="col-md-1 col-xs-1 col-sm-1  col-lg-1 ">
        <button type="button" mat-mini-fab color="primary" (click)="edit(contact)">
          <i class="fa fa-edit left"></i>
        </button>
      </div>
      <div class="col-md-1 col-xs-1 col-sm-1  col-lg-1 ">
        <button type="button" mat-mini-fab color="warn" (click)="delete(contact)">
          <i class="fa fa-trash left"></i>
        </button>
      </div>
    </div>
  </div>
</div>

更新如所有注释中所建议，更改为col-1模式如您所见，波纹管仍然一样

您可以看到上部设置为col-1模式，底部设置为先前配置。

所有这些使我相信，我需要以某种方式在Angular-CLI项目中的某个地方调整对CSS的引用。现在，当我使用Material Design和MDBootstrap时，必须为我提供对响应能力的支持，这很奇怪，但事实并非如此。

package.json

 "angular-bootstrap-md": "^6.0.1",

在角度上，我认为最好不要将css文件放在index.html中。我可能可以npm安装bootstrap软件包，但问题是它将覆盖并弄乱其他框架-Material Design和MDBoostrap吗？

我会在这里尝试更新。

更新

npm安装引导程序

 "bootstrap": "^4.1.1",

为angular-cli项目安装了bootstrap 4 但对代码没有影响。：（

更新

在清除缓存和刷新后工作。酷。谢谢大家！

仍然需要针对PC和移动设备进行调整。现在无论如何都很难看（尤其是移动），但这是一个很好的方向。谢谢！

Answer 1

代替使用col-xs-1，而使用col-1（xs在bootstrap-4中不存在）

请参见小提琴：https://jsfiddle.net/jpfgtrc3/3/

实际上，您不需要其他{col-md-1 ...）col-1：https://jsfiddle.net/jpfgtrc3/5/

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">


<div class="card-body text-left">
  <div class="container">
<div class="row">
  <div class="col-5">
    your name
  </div>
  <div class="col-1">
    <a href="http://maps.google.com/?q={{address}}" target="_blank">
      <i class="fa fa-map-marker" title="{{address}}"></i>
    </a>
  </div>
  <div class="col-1">
    <a href="tel:{{contact.phoneNumber}}">
      <i class="fa fa-phone" title="{{contact.phoneNumber}}">
      </i>
    </a>
  </div>
  <div class="col-1">
    <a href="mailto:{{contact.email}}">
      <i class="fa fa-envelope" title="{{contact.email}}">
      </i>
    </a>
  </div>
  <div class="col-2">
  </div>

  <div class="col-1">
    <button type="button" mat-mini-fab color="primary" (click)="edit(contact)">
      <i class="fa fa-edit left"></i>
    </button>
  </div>
  <div class="col-1">
    <button type="button" mat-mini-fab color="warn" (click)="delete(contact)">
      <i class="fa fa-trash left"></i>
    </button>
  </div>
</div>
  </div>
</div>

要更新：

使用p-o到col-*和d-none d-sm-block到<div class="col-2">

请参阅小提琴：https://jsfiddle.net/jpfgtrc3/14/

Answer 2

仅使用类col-1，col-4等。而不是使用col-sm-*，col-md-*和col-lg--*类

<div class="row">
  <div class="col-5">
    {{contact.firstName}} {{contact.lastName}}
  </div>
  <div class="col-1 ">
    <a href="http://maps.google.com/?q={{address}}" target="_blank">
      <i class="fa fa-map-marker" title="{{address}}"></i>
    </a>
  </div>
  <div class="col-1 ">
    <a href="tel:{{contact.phoneNumber}}">
      <i class="fa fa-phone" title="{{contact.phoneNumber}}">
      </i>
    </a>
  </div>
  <div class="col-1">
    <a href="mailto:{{contact.email}}">
      <i class="fa fa-envelope" title="{{contact.email}}">
      </i>
    </a>
  </div>
  <div class="col-2">
  </div>

  <div class="col-1">
    <button type="button" mat-mini-fab color="primary" (click)="edit(contact)">
      <i class="fa fa-edit left"></i>
    </button>
  </div>
  <div class="col-1">
    <button type="button" mat-mini-fab color="warn" (click)="delete(contact)">
      <i class="fa fa-trash left"></i>
    </button>
  </div>
</div>
</div>
</div>

Bootstrap Angular 5移动行未内联

2 个答案: