为什么我的列未对齐？

Question

我有一个网站菜单，如下所示：

<li class="dropdown dropdown-mm">
  <a class="dropdown-toggle" data-toggle="dropdown">@ViewData["resProducts"]<b class="caret"></b></a>
  <!-- Dropdown Menu -->
  <ul class="dropdown-menu dropdown-menu-mm dropdown-menu-persist">
    <li class="row">
      <ul class="col-md-6">
        <li class="dropdown-header">@ViewData["resDevices"]</li>
        <li>
          <a asp-controller="Devices" asp-action="RLC21" tabindex="-1" class="menu-item">
            <img src="~/img/devices/rlc-21.png" style="float: left" alt="rlc-21" />
            <p>&nbsp;&nbsp;&nbsp;RL-C21</p>
          </a>
        </li>
        <li>
          <a asp-controller="Devices" asp-action="RLR19" tabindex="-1" class="menu-item">
            <img src="~/img/devices/rl-r19.png" style="float: left" alt="rlr-19" />
            <p>&nbsp;&nbsp;&nbsp;RL-R19</p>
          </a>
        </li>
        <li>
          <a asp-controller="Devices" asp-action="RLA200" tabindex="-1" class="menu-item">
            <img src="~/img/devices/rl-a200.png" style="float: left" alt="rlr-19" />
            <p>&nbsp;&nbsp;&nbsp;RL-A200</p>
          </a>
        </li>

        <li>
          <a asp-controller="Devices" asp-action="RLA500" tabindex="-1" class="menu-item">
            <img src="~/img/devices/RL_A_500_160_80.png" style="float: left" alt="rla-500" />
            <p>&nbsp;&nbsp;&nbsp;RL-A500</p>
          </a>
        </li>
        <li>
          <a asp-controller="Devices" asp-action="RLA1000" tabindex="-1" class="menu-item">
            <img src="~/img/devices/RL_A_500_160_80_1.png" style="float: left" alt="rla-1000" />
            <p>&nbsp;&nbsp;&nbsp;RL-A1000</p>
          </a>
        </li>

      </ul>
      <ul class="col-md-6">
        <li class="dropdown-header">@ViewData["resSoftware"]</li>
        <li>
          <a asp-controller="Software" asp-action="VisProbe">
            <img src="~/img/software/VIsprobeApp_64x64.ico" style="float: left" alt="rlc-21" />
            <p>&nbsp;&nbsp;&nbsp;VisProbe SL</p>
          </a>
        </li>
        <li>
          <a asp-controller="Software" asp-action="VisAnalyser">
            <img src="~/img/software/VisAnalyser_64x64.ico" style="float: left" alt="rlc-21" />
            <p>&nbsp;&nbsp;&nbsp;VisAnalyser</p>
          </a>
        </li>

      </ul>
    </li>
  </ul>
</li>

但是我从这段代码中得到了奇怪的结果：左列中的前三个项目正常显示，而另两个项目未对齐。

所有元素的菜单代码均相同。 这种行为可能是什么原因？

不对齐的方式取决于屏幕的尺寸。当我减小浏览器窗口的大小时，对齐误差会发生变化：