【发布时间】：2020-09-15 16:56:37
【问题描述】：
我正在使用 Svelte 构建一个应用程序 - 太棒了！
我正在尝试将 bootstrap 4 用于 css，因此我添加了带有 npm install 的 sveltestrap，并按照 sveltestrap 的 npm 页面上的说明全局包含了引导 css。
我对选择输入有疑问。出于某种原因，就在标签下方，会出现一个标准文本输入，其中包含 ul 类型的选项列表。在此下方，我得到了我想要的选择控件 - 请参阅随附的屏幕截图 。
令人费解的是，html 很好且正确，所以我真的很困惑这里发生了什么。
这里是相关的.svelte：
<Form>
<FormGroup>
<Label for="verksamhetstyp">Verksamhetstyp</Label>
<Input type="select" required name="verksamhetstyp" id="verksamhetstyp" bind:value={fastighet.verksamhetstyp}>
<!--<option value=null></option>-->
{#each verksamhetstyp as vtyp}
<option value={vtyp._id}>{ vtyp._id }</option>
{/each}
</Input>
</FormGroup>
</Form>
这里是svelte生成的html：
<form class="">
<div class="form-group">
<label class="" for="verksamhetstyp">Verksamhetstyp</label>
<select required id="verksamhetstyp" class="form-control" name="verksamhetstyp" value="Skola">
<option value="BMSS">BMSS</option>
<option value="Daglig verksamhet">Daglig verksamhet</option>
<option value="Förskola">Förskola</option>
<option value="Lägenheter">Lägenheter</option>
<option value="Skola">Skola</option>
<option value="Äldreboende">Äldreboende</option>
<option value="Övriga">Övriga</option>
</select>
</div>
</form>
如果我使用“纯”html 而不是 sveltestrap 的组件，我会遇到同样的问题。
【问题讨论】：
-
您是否使用
svelte:head正确添加了css？因为正如您在codesandbox 中看到的那样，没有样式问题。 -
我明白了。我在 template.html 中添加了 css，但无论我添加 css，结果都是一样的。我正在使用工兵和 SSR，例如，我正在使用
import Form from 'sveltestrap/src/Form.svelte';而不是import { Form, FormGroup, Label, Input } from "sveltestrap"也许这就是问题所在？ -
是的，您可能只需要从入口点导入组件（而不是直接导入组件文件）。我应该写这个作为答案吗？
标签： bootstrap-4 svelte