html - 多列文本显示期间的自举间距问题

Question

我在下面有以下代码，但间距有问题。我正在使用 Bootstrap 。我如何获得标题和值(value)，例如“Leonard Moonsoooon”。一直只有 20 像素？

如何缩小间距？高级顾问 Leonard Moonsooon

下面是我的代码和 fiddle FIDDLE

  <div id="clientData">
               <div class="row">
                  <div class="col-md-2 col-sm-2  col-xs-6 col-md-2OW">
                     <div class="name"><strong>Senior Advisor </strong></div>
                     <!--<div class="account"><strong> Prod </strong></div>
                   <!--  <div class="approved"><strong> Prod </strong></div>
                     <div class="activity"><strong> Last Activity </strong></div>
                     <div class="activity"rong> Risk Category</strong></div> -->
                  </div>
                  <div class="col-md-2 col-sm-2 col-xs-6">
                     <div class="name">Leonard Moonsoooon</div>
                     <!--<div class="account">0789</div>
                     <!--<div class="approved">12/5/2015</div>
                     <div class="activity">4/1/2016</div>
                     <div class="riskcategory">
                        <div style="background:Yellow; padding:2px;height:18px; width:50px;"></div>
                     </div>--->
                  </div>
                  <div class="clearfix visible-xs-block"></div>
                  <div class="col-md-2 col-sm-3 col-xs-6 col-md-2OW12 thirdrdcolTitle">
                     <div class="brokerage"><strong> Company </strong></div>
                     <!--<div class="approved"><strong> Max Approved Loan Amt </strong></div>
                     <div class="balance"><strong> Loan Balance </strong></div>
                     <div class="credit"><strong> Available Credit </strong></div>
                     <div class="aging"><strong> Days in this Category </strong></div>  -->
                  </div>
                  <div class="col-md-2 col-sm-2 col-xs-6">
                     <div class="pledged "> YUMark</div>
                     <!--<div class="approved "> $2,050,877.82</div>
                     <div class="balance "> $1,849,000.00</div>
                     <div class="credit "> $201,877.82</div>
                     <div class="aging "> 3</div>-->
                  </div>
                  <div class="clearfix visible-xs-block"></div>
                  <div class="col-md-1 col-sm-1 col-xs-6">                   
                        <div class="account"><strong> Production </strong></div>

                  </div>
                  <div class="col-md-2 col-sm-2 col-xs-6">
                        <div class="pledged "> 2351</div>

                  </div>  
               </div>
            </div>

Answer 1

你那里有一些非常时髦的 html。但是，您可以做的最简单的事情就是将两个值都放在一列 div 中，而不是两列。

.name strong{margin: 0 20px 0 0;}

<div class="col-md-4 col-sm-4  col-xs-12 col-md-2OW">
  <div class="name"><strong>Senior Advisor</strong> Leonard Moonsoooon</div>
</div>

https://jsfiddle.net/pwku8qam/