Question

我使用MVC Razor和bootstrap创建了DropDownList，下拉列表显示了数据库中的值并且工作正常，但设计非常简单

这是代码：

<div class="input-group col-sm-10">
    <span class="input-group-addon" id="basic-addon1">Seleccione</span>
    @Html.DropDownList("algo", ViewBag.ddl as SelectList, new { @class = "form-control" })    
</div>

但我真的很想使用这个设计：

目前我尝试以这种方式添加按钮：

<div class="input-group col-sm-10">
<div class="input-group-btn">
    <button type="button" class="btn btn-default" tabindex="-1">Select</button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    @Html.DropDownList("algo", ViewBag.ddl as SelectList, new { @class = "form-control" })
</div>

但结果是下一个：

你能否告诉我是否有办法完成我想要的任务。

Answer 1

您可以尝试使用某些CSS

<style>
 select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
</style>

<!DOCTYPE html>
<html>
<style>
select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

</style>
<body>

<h3>Using CSS </h3>

<div>
<label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>
</div>
</body>
</html>

使用带引导程序的mvc razor DropDownList来完成特定设计

1 个答案: