为什么我的bootstrap样式没有正确应用？

Question

我将此表单从引导页面复制到我的网站。

const svg = d3.select('svg');
const height = +svg.attr('height');
const width = +svg.attr('width');

// Test Data
const nodes = [ {}, {} ];

setTimeout(() => {
  nodes.push({});
  redraw();
}, 2000);

const ticked = () => {
  svg.selectAll('g.node')
    .attr('transform', d => {
      if (isNaN(d.x) || isNaN(d.y)) {
        console.error('nan!!!');
        d.x = 50;
        d.y = 50;
      }

      return `translate(${d.x},${d.y})`;
    });
};

const simulation = d3.forceSimulation()
  .force('repulsion', d3.forceManyBody().strength(-30))
  .force('pin_y_to_center', d3.forceY().y(d => height / 2).strength(0.1))
  .force('pin_x_to_center', d3.forceX().x(d => width / 2).strength(0.1));

simulation.nodes(nodes);
simulation.on('tick', ticked);

const redraw = () => {
  const node = svg
    .selectAll('.node')
    .data(nodes)
    .enter().append('g');

  node.attr('class', 'node')
    .append('circle')
      .attr('r', 5);
};

redraw();

由于某种原因，未正确应用bootstrap样式。该按钮左边有一个边框半径。

我通过npm添加了Bootstrap，我正在使用

  

../../../ node_modules /引导/ DIST / CSS / bootstrap.min.css

在angular-cli.json

中

编辑：我从CDN下载了 min.css ，其中包含了一个并且可以正常工作。这似乎是npm版本的问题。也许我使用的是错误的文件？

Answer 1

尝试更改您的代码，如下所示

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
    <span class="input-group-btn">
      <button class="btn btn-outline-secondary" type="button">Button</button>
    </span>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

正如您已经想到的那样，这是因为Bootstrap版本。您正在使用的标记是针对beta 3 - 以及最终的Bootstrap 4版本。最终的Bootstrap 4实际上是released yesterday。

详细信息：
从Bootstrap 4 beta 2 到 beta 3 的更改不多，但输入组组件实际上已被重写，因为它已在beta 3 release notes于2017年12月28日。

在测试版2中，相应的类为.input-group-addon，标记如下：

<div class="input-group">
    <input type="text" class="form-control" placeholder="Placeholder">
    <button class="input-group-addon btn btn-outline-secondary" type="button">Button</button>
</div>

在测试阶段3 .input-group-addon被.input-group-{prepend|append}取代，而且标记改变了这一点：

<div class="input-group">
    <input type="text" class="form-control" placeholder="Placeholder">
    <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
</div>