Bootstrap Angular 5 移动行未内联

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>

Update As suggested in all comments changed to the col-1 pattern As you can see bellow still the same

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

所有这些让我相信我需要以某种方式调整对 Angular-CLI 项目中某处 css 的引用。现在，当我使用 Material 设计和 MDBootstrap 时，它必须为我提供响应能力支持，但很奇怪，它没有..

package.json

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

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

我会尝试在这里更新..

Update

npm 安装bootstrap

 "bootstrap": "^4.1.1",

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

Update

清除缓存和 refreshing.Cool 后有效。谢谢大家！

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

Answer 1

不使用col-xs-1，而是使用col-1（xs不存在于bootstrap-4）

参见fiddle: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">

参见fiddle:https://jsfiddle.net/jpfgtrc3/14/

Answer 2

仅使用 class col-1、col-4 等。classes 而不是使用 col-sm-*、col-md-* 和 col-lg--* classes

<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 移动行未内联

Bootstrap Angular 5 mobile row not inline

html

css

bootstrap-4

angular

mdbootstrap