Question

所以继承我的情况，在我列出了各国紧急联系方式的正确对齐后，我尝试将json加入其中。不幸的是，json骗了我的文本。我尝试在“col-md-12”中使用另一个col网格无济于事。我也试过右拉和左拉，但热线名称和号码仍然没有正确对齐。我想就如何定位文本提出一些建议。

以下是它应该做的事情:(想象一下标志位于左侧，数字应该像列一样对齐）

文莱

救护车：991

警察：993

消防和救援：995

搜救：998

............................................... ................................................. < / p>

以下是当前的文字：

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

要将图片左侧对齐并且内容位于右侧，我会使用

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

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

media object

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

1 个答案: