html - 当每个按钮都有一个 div 时，如何在 ASP.NET MVC 中并排获得按钮？

Question

这是我的代码，但所有内容都排在标题的左侧，我似乎找不到任何可以更改布局的内容。我需要给div添加参数还是需要使用float？提前致谢。

<div class="dropdown"> 
                 <button class="btn btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Home
              </button>
            </div>

            <div class="dropdown" style="float: right">
        <button class="btn btn dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Our Company
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown 1" href="#">Our History</a>
            <a class="dropdown 2" href="#">Facilities</a>
        </div>
        <div class="dropdown">
            <button class="btn btn dropdown-toggle" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Employee Services
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown" href="#">Forms</a>
                <a class="dropdown" href="#">Pay Stubs</a>
                <a class="dropdown" href="#">Employee Handbook</a>
            </div>
            <div class="dropdown">
                <button class="btn btn dropdown-toggle" type="button" id="dropdownMenuButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Tickets
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown 1" href="#">IT Service Ticket</a>
                    <a class="dropdown 2" href="#">Purchasing Ticket</a>
                    <a class="dropdown 3" href="#">Maitenence Ticket</a>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

我在 Bootply 中创建了这个.我绝对认为有一些 HTML 格式问题导致了这个问题。

有关闭</div>缺少的标签，但无论如何这里是您的代码重写以适应您想要实现的目标。

<div class="row">
    <div class="dropdown col-md-2"> 
        <button class="btn btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Home
        </button>
    </div>

    <div class="dropdown col-md-2">
        <button class="btn btn dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Our Company
        </button>
        <div class="dropdown-menu col-md-2" aria-labelledby="dropdownMenuButton">
            <a class="dropdown 1" href="#">Our History</a>
            <a class="dropdown 2" href="#">Facilities</a>
        </div>
    </div>
    <div class="dropdown col-md-2">
        <button class="btn btn dropdown-toggle" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           Employee Services
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown" href="#">Forms</a>
            <a class="dropdown" href="#">Pay Stubs</a>
            <a class="dropdown" href="#">Employee Handbook</a>
        </div>
    </div>
    <div class="dropdown col-md-2">
        <button class="btn btn dropdown-toggle" type="button" id="dropdownMenuButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Tickets
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown 1" href="#">IT Service Ticket</a>
            <a class="dropdown 2" href="#">Purchasing Ticket</a>
            <a class="dropdown 3" href="#">Maitenence Ticket</a>
        </div>
    </div>
 </div>

Bootstrap Grid System绝对是您的不二之选。

如果这有帮助，请告诉我。