尝试将样式添加到模态表单

Question

im尝试使用引导程序和模态向我的表单添加样式。这是我的表格模式。我看到它正在通过JSFiddle运行，但是在我的实际浏览器上却无法运行。我认为这与引导程序有关，但我不知道该怎么办。我也尝试通过google chrome上的控制台执行此操作，并且该操作在此起作用，只是当我手动编辑文件并刷新页面时不起作用。

#formStyles {
  display: flex;
  flex-direction: column;
}

<div class="modal-body">
  <form class="recipe-form" id="formStyles" action="/pizza" method="POST">
    <a id="userId" data-id=<%=user.id %>></a>

    <label for="vegy1">Cucumber</label>
    <input type="number" class="quant" name="vegy1" data-name="cucumber" min="0" max="3" value="0">

    <label for="vegy2">Tomato</label>
    <input type="number" class="quant" name="vegy2" data-name="tomato" min="0" max="3" value="0">

    <label for="vegy3">Pineapple</label>
    <input type="number" class="quant" name="vegy3" data-name="pineapple" min="0" max="3" value="0">

    <label for="vegy4">Avocado</label>
    <input type="number" class="quant" name="vegy4" data-name="avocado" min="0" max="3" value="0"><br>

    <label for="vegy5">Eggplant</label>
    <input type="number" class="quant" name="vegy5" data-name="eggplant" min="0" max="3" value="0">

    <label for="vegy6">Olive</label>
    <input type="number" class="quant" name="vegy6" data-name="olive" min="0" max="3" value="0">

    <label for="vegy7">Onion</label>
    <input type="number" class="quant" name="vegy7" data-name="onion" min="0" max="3" value="0">

    <label for="vegy8">Mushroom</label>
    <input type="number" class="quant" name="vegy8" data-name="mushroom" min="0" max="3" value="0"><br>

    <label for="vegy9">Garlic</label>
    <input type="number" class="quant" name="vegy9" data-name="garlic" min="0" max="3" value="0">

    <label for="vegy10">Spinach</label>
    <input type="number" class="quant" name="vegy10" data-name="spinach" min="0" max="3" value="0">

    <label for="vegy11">Cilantro</label>
    <input type="number" class="quant" name="vegy11" data-name="cilantro" min="0" max="3" value="0">

    <label for="vegy12">Chicken</label>
    <input type="number" class="quant" name="vegy12" data-name="chicken" min="0" max="3" value="0"><br>

    <label for="vegy13">Anchovy</label>
    <input type="number" class="quant" name="vegy13" data-name="anchovy" min="0" max="3" value="0">

    <label for="vegy14">Bacon</label>
    <input type="number" class="quant" name="vegy14" data-name="bacon" min="0" max="3" value="0">

    <label for="vegy15">Sausage</label>
    <input type="number" class="quant" name="vegy15" data-name="sausage" min="0" max="3" value="0">

    <label for="vegy16">Beef</label>
    <input type="number" class="quant" name="vegy16" data-name="beef" min="0" max="3" value="0"><br>

    <label for="vegy17">Ham</label>
    <input type="number" class="quant" name="vegy17" data-name="ham" min="0" max="3" value="0">

    <label for="vegy18">Pepperoni</label>
    <input type="number" class="quant" name="vegy18" data-name="pepperoni" min="0" max="3" value="0">

    <label for="vegy19">Salami</label>
    <input type="number" class="quant" name="vegy19" data-name="salami" min="0" max="3" value="0">

    <label for="vegy20">Banana</label>
    <input type="number" class="quant" name="vegy20" data-name="banana" min="0" max="3" value="0"><br>

    <p id="totalCal"></p>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      <button type="submit" class="btn btn-primary addPizza">Add Recipe</button>
    </div>

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