使用引导网格和 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/