Bootstrap Angular 5移动行未内联

Question

当宽度小于 579 像素时，如何将行调整为内联？ 我需要它在移动设备上和桌面上一样。

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

更新 正如所有 cmets 中所建议的那样，更改为 col-1 模式 如您所见，仍然相同

可以看到上半部分设置了 col-1 模式，下半部分设置了之前的配置。

所有这一切让我相信我需要在我的 Angular-CLI 项目中的某处调整对 css 的引用。 现在，当我使用 Material Design 和 MDBootstrap 时，它必须为我提供响应性支持，但奇怪的是它没有......

package.json

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

在 Angular 中，我认为将 css 文件放在 index.html 中并不是最佳做法。 我可能可以 npm install bootstrap package ，但问题是它会覆盖和弄乱其他框架 - Material Design 和 MDBoostrap 吗？

我会在这里尝试更新..

更新

npm 安装引导程序

 "bootstrap": "^4.1.1",

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

更新

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

仍然需要针对电脑和移动设备进行调整.. 现在它在任何选项中都很难看（尤其是移动），但这是一个很好的方向.. 谢谢！

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>