使用引导程序网格和css与json对齐文本

Question

因此，继承我的情况，在我摆脱了这些国家的紧急联系人详细信息的正确路线之后，我尝试添加json。不幸的是，詹森把我的文本弄丢了。我尝试在“col-md-12”内使用另一个col网格无济于事。我也尝试引导拉右和拉左，但热线名称和数字仍然没有正确对齐。我想就如何定位文本提出一些建议。

这里是它应该做的事：（想象中的标志是在左侧和数量都应该像一列排列）

文莱

救护车：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

要校正图象到左边的时间和合作，并在有内容我会用th的权利e 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/