WP:高级自定义字段.灵活的内容+中继器字段.在内联CSS中使用自定义字段

我正在尝试设计一个H4元素的样式，该元素具有不同宽度的左下边框和由客户端在CMS中填充的自定义字段定义的特定颜色。我的CMS布局是正确的，但下面的代码我知道不是。我的问题领域是H4，代码的其他部分呈现正确。

<?php               
if (get_field("sponsorlogos")){
  while (has_sub_field("sponsorlogos")){
    if (get_row_layout() == "sponsor_category_title"){ // Sponsor Category Title
      echo '<h4 style="border-left: 10px solid '.the_sub_field('sponsor_category_title_colour').' !important; border-bottom: 1px solid '.the_sub_field("sponsor_category_title_colour").' !important; margin: 40px 0 15px 0;">';
        the_sub_field("sponsor_category_title_text");  
      echo '</h4>';
    }  
    if (get_row_layout() == "sponsor_logo_container"){ // Sponsor Repeater Field
      $rows = get_sub_field('sponsor_item'); 
      if ($rows){ 
        echo '<ul id="sponsor-logo-container">';
        foreach($rows as $row){
          echo '<li class="sponsor-logo"><a class="logo-link" target="_blank" href="'.$row['sponsor_link'].'"><img width="190" height="110" src="'.$row['sponsor_logo'].'" alt="'.$row['sponsor_title'].'"class="logo-image grayscale" /></a><span class="staff-name">'.$row['sponsor_support'].'</span></li>'; 
        }
        echo '<div style="clear:both;"></div>';
        echo '</ul>';
      }
    } 
  }
}
?>

结果标记如下：

<h4 style="border-left: 10px solid  !important; border-bottom: 1px solid  !important; margin: 40px 0 15px 0;">Bronze</h4>

您可以看到它省略了十六进制的"#xxxxxxx"颜色部分。

不过，我应该重申一下，因为颜色十六进制在标记中成功地吐出了两次（正如预期的那样），但它出现在H4元素上方。

我确信我没有正确使用高级自定义字段标记。

救命！