bootstrap form-inline无法使用d3正确呈现

Question

我使用d3.js创建交互式可视化;可视化的顶部有一个GUI，我用bootstrap设计样式。我试图将GUI设置为.form-inline，但是复选框的标签没有显示，.form-group之间的间距也不起作用。

呈现的html：

呈现代码：

JS代码

对于我使用的复选框（其中selector是div ID，表示所有内容都被渲染）：

var gui = d3.select(selector).append("div")
    .attr("id", "gui")
    .attr("class","form-inline")

gui.append("div")
    .attr("class","checkbox")
    .append("label")
    .append("input")
    .attr("type","checkbox")
    .attr("id","toggle_distance")
    .attr("checked","")
    .attr("onclick","guiUpdate(this)")
    .text(" Toggle distance labels")

对于下拉列表，我使用：

var leafSelect = gui.append("div")
    .attr("class","form-group")
    .append("select")
    .attr('onchange','guiUpdate(this)')
    .attr('id','leafColor')
    .attr("class","form-control")

leafSelect.selectAll("option")
    .data(mapParse.keys()).enter()
    .append("option")
    .text(function(d) { return d; })

查看bootstrap form examples，看起来一切都应该正确呈现。我错过了什么？

Answer 1

对于复选框问题：将文字移到input之外和label内：

gui.append("div")
   .attr("class","checkbox")
   .append("label")
   .text(" Toggle distance labels")
   .append("input")
   .attr("type","checkbox")
   .attr("id","toggle_distance")
   .attr("checked","")
   .attr("onclick","guiUpdate(this)")

现在，对于间距问题，这是一个猜测：追加form而不是div：

var gui = d3.select(selector).append("form")
   .attr("id", "gui")
   .attr("class","form-inline")

就像你做的那样内在的div：

var leafSelect = gui.append("div")
   .attr("class","form-group")
   .append("select")
   .attr('onchange','guiUpdate(this)')
   .attr('id','leafColor')
   .attr("class","form-control")

Answer 2

我正在使用以下内容解决复选框标签问题：

<ItemGroup Label="ProjectConfigurations">
    <ProjectConfiguration Include="Debug|x64">
      <Configuration>Debug</Configuration>
      <Platform>x64</Platform>
    </ProjectConfiguration>
    <ProjectConfiguration Include="Release|x64">
      <Configuration>Release</Configuration>
      <Platform>x64</Platform>
    </ProjectConfiguration>
</ItemGroup>

对齐问题我很遗憾地用一些CSS修补到位：

var gui = d3.select(selector).append("div")
    .attr("id", "gui")
    .attr("class","form-inline")

var check1 = gui.append("div")
    .attr("class","checkbox")
    .append("label")

check1.append("input")
    .attr("type","checkbox")
    .attr("id","toggle_distance")
    .attr("checked","")
    .attr("onclick","guiUpdate(this)")

check1.append('text')
    .text("Toggle distance labels")