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

更新正如所有评论中建议的那样，更改为 col-1 模式您可以在下面看到仍然相同

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

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

包.json

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

在 Angular 中，我认为将 css 文件放在 index.html 中并不是最佳做法。我可能可以 npm install bootstrap 包，但问题是它会覆盖和弄乱其他框架 - 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-otocol-*和 d-none d-sm-blockto <div class="col-2">

见小提琴：https ://jsfiddle.net/jpfgtrc3/14/

Answer 2

仅使用 class col-1, col-4, etc.. classes 而不是使用col-sm-*, col-md-*and 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>