css - 使用 bootstrap 网格和 css 与 json 对齐文本

Question

这是我的情况，在我正确排列了国家/地区的紧急联系详细信息之后，我尝试向其中添加 json。不幸的是，json 扰乱了我的文本。我尝试在“col-md-12”中使用另一个 col 网格，但无济于事。我也试过 bootstrap pull-right 和 pull-left 但热线名称和号码仍然没有正确对齐。我想就如何定位文本提出一些建议。

这是它应该做的:(想象一下标志在左侧，数字应该像一列一样对齐)

文莱

救护车:991

警察:993

消防和救援:995

搜救:998

................................................ .....................................

这是当前乱七八糟的文字:

mess of hotlines

感谢您花时间和合作给任何回复

<div class="module-text" ng-controller="VolunteerAidCtrl">
    <p class="services-margin">In an emergency, please contact the appropriate service in their respective ASEAN countries for the proper response. These numbers can be called either on landline and mobile and consist of the Police Department, Fire Department, and the Hospital Ambulance. </p>
    <hr>
    <div class="row">
      <div class="col-lg-6">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search for..." ng-model="search">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
          </span>
        </div><!-- /input-group -->
      </div><!-- /.col-lg-6 -->
    </div>
    <hr>
    <div class="row">
        <div class="col-md-6 services-margin" ng-repeat="service in services | filter:search">

                <img class="flagsize" ng-src="{{service.flagimgurl}}">
                <div class="country-title col-md-3" ng-bind="service.country"></div>

                    <p class="col-md-3" ng-bind="service.hl1"></p>
                        <span class="pull-right" ng-bind="service.hl1num1"></span>
                        <span class="pull-right" ng-bind="service.hl1num2"></span>
                        <span class="pull-right" ng-bind="service.hl1num3"></span>
                    <p ng-bind="service.hl2"></p>
                        <span class="pull-right" ng-bind="service.hl2num1"></span>
                        <span class="pull-right" ng-bind="service.hl2num2"></span>
                        <span class="pull-right" ng-bind="service.hl2num3"></span>
                    <p ng-bind="service.hl3"></p>
                        <span class="pull-right" ng-bind="service.hl3num1"></span>
                        <span class="pull-right" ng-bind="service.hl3num2"></span>
                        <span class="pull-right" ng-bind="service.hl3num3"></span>
                    <p ng-bind="service.hl4"></p>
                        <span class="pull-right" ng-bind="service.hl4num1"></span>
                        <span class="pull-right" ng-bind="service.hl4num2"></span>
                        <span class="pull-right" ng-bind="service.hl4num3"></span>
        </div>
    </div>
</div>

Answer 1

要将图像左对齐并使内容右对齐，我会使用 media object

为了正确对齐，为什么不使用表格呢？

<div class="row">
<div class="col-md-6" ng-repeat="service in services | filter:search">
  <div class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object flagsize" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Flag_of_Brunei_1906-1959.svg/1000px-Flag_of_Brunei_1906-1959.svg.png" alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading country-title" ng-bind="service.country">Brunei</h4>
      <table class="table">
        <tr>
          <td ng-bind="service.hl1">Service 1</td>
          <td style="text-align:right">
            <div ng-bind="service.hl1num1">111</div>
            <div ng-bind="service.hl1num2">222</div>
            <div ng-bind="service.hl1num3">333</div>
          </td>
        </tr>
        <tr>
          <td ng-bind="service.hl2">Service 2</td>
          <td style="text-align:right">
            <div ng-bind="service.hl2num1">111</div>
            <div ng-bind="service.hl2num2">222</div>
            <div ng-bind="service.hl2num3">333</div>
          </td>
        </tr>
        <tr>
          <td ng-bind="service.hl3">Service 3</td>
          <td style="text-align:right">
            <div ng-bind="service.hl3num1">111</div>
            <div ng-bind="service.hl3num2">222</div>
            <div ng-bind="service.hl3num3">333</div>
          </td>
        </tr>
        <tr>
          <td ng-bind="service.hl4">Service 4</td>
          <td style="text-align:right">
            <div ng-bind="service.hl4num1">111</div>
            <div ng-bind="service.hl4num2">222</div>
            <div ng-bind="service.hl4num3">333</div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

https://jsfiddle.net/ktbmLaq8/