Question

我有下面的组件，如图所示，因为它们不在一条线上。我已经尝试了几乎所有的css组件，但没有任何工作对我来说。我是CSS的新手。请问任何人请帮助我。

要求：

需要减少文本与第一个列表框之间的距离。
所有组件应在一行中。

以下是代码：

<div class="cf mpcontent_header">
            <div class="col-md-4">
                <h4 class="with_button" style="font-size: 18px">@Resources.LanguageStrings.WOIndexHeaderViewAll</h4>
            </div>
            <div class="col-md-3 hidebtnmobile">
                <div class="col-md-8">
                    @Html.ListBoxFor(m => m.SelectedVendor, Model.GetVendorList(user.idCompany, user.SiteSelection), new { data_placeholder = Resources.LanguageStrings.SelectVendors })
                </div>
                <div class="col-md-4">
                    <button id="submitButton" class="btn large primary-bg" style="font-size: 12px;" onclick="selectAllComboItems('#SelectedVendor', false);return false;">@Resources.LanguageStrings.ClearAll</button>
                </div>
            </div>
            <div class="col-md-3 hidebtnmobile">
                <div class="col-md-8">
                    @Html.ListBoxFor(m => m.SelectedStaff, Model.GetStaffMembers(user.idCompany, user.SiteSelection), new { data_placeholder = Resources.LanguageStrings.SelectStaff })
                </div>
                <div class="col-md-4">
                    <button id="submitButton" class="btn large primary-bg" style="font-size: 12px;" onclick="selectAllComboItems('#SelectedStaff', false);return false;">@Resources.LanguageStrings.ClearAll</button>
                </div>
            </div>
            <div class="col-md-8 hidebtnmobile" style="float: right;">
                @if (!user.IsInRole(SystemRoles.Viewer | SystemRoles.Submitter | SystemRoles.Tenant | SystemRoles.StaffLimited ))
                {
                    <button id="multiComplete" class="btn large primary-bg button_float_right " style="font-size: 12px;" title="@Resources.LanguageStrings.MultiComplete">@Resources.LanguageStrings.MultiComplete</button>
                }
                @if (!user.IsInRole(SystemRoles.Viewer | SystemRoles.Submitter | SystemRoles.Tenant | SystemRoles.StaffUnlimited | SystemRoles.StaffLimited | SystemRoles.VendorUnlimited | SystemRoles.VendorLimited))
                {
                    <button id="multiClose" class="btn large primary-bg button_float_right " style="margin-right: 10px; font-size: 12px;" title="@Resources.LanguageStrings.MultiClose">@Resources.LanguageStrings.MultiClose</button>
                }
        @if (!user.IsInRole(SystemRoles.Viewer | SystemRoles.VendorLimited))
        {
                    @*<button id="add" class="btn large primary-bg button_float_right hidebtnmobile" style="margin-right: 10px;" title="@Resources.LanguageStrings.AddWOTitle" onclick="location.href='@Url.Action("AddWorkOrder")'"><i class="glyph-icon icon-plus"></i>@Resources.LanguageStrings.Add</button>*@
        <button class="btn large primary-bg button_float_right btnPrint hidebtnmobile" style="margin-right: 10px; font-size: 12px;" title="@Resources.LanguageStrings.PrintTitle ">@Resources.LanguageStrings.MultiPrint</button>
        }
            <div class="tableActions">
                <button class="btn large primary-bg" onclick="copyTableText($('#WorkOrderList'));">Copy</button>
                <button class="btn large primary-bg" onclick="$('#WorkOrderList').tableToCSV();">CSV</button>
            </div>
        </div>
        </div>

Answer 1

代码

<div class="col-md-3 hidebtnmobile">
                <div class="col-md-8">
                    @Html.ListBoxFor(m => m.SelectedVendor, Model.GetVendorList(user.idCompany, user.SiteSelection), new { data_placeholder = Resources.LanguageStrings.SelectVendors })
                </div>
                <div class="col-md-4">
                    <button id="submitButton" class="btn large primary-bg" style="font-size: 12px;" onclick="selectAllComboItems('#SelectedVendor', false);return false;">@Resources.LanguageStrings.ClearAll</button>
                </div>
            </div>

你正在使用col-md放置新的div，它们最多可以添加12列，而不会将它们包含在div =“row”的div中

每当你做这样的活动时，你必须首先用div =“row”

将它绑定在div中

例如，您的代码的这一部分应写为：

 <div class="col-md-3 hidebtnmobile">
    <div class="row">
                        <div class="col-md-8">
                            @Html.ListBoxFor(m => m.SelectedVendor, Model.GetVendorList(user.idCompany, user.SiteSelection), new { data_placeholder = Resources.LanguageStrings.SelectVendors })
                        </div>
                        <div class="col-md-4">
                            <button id="submitButton" class="btn large primary-bg" style="font-size: 12px;" onclick="selectAllComboItems('#SelectedVendor', false);return false;">@Resources.LanguageStrings.ClearAll</button>
                        </div>
    </div>
</div>

需要将所有CSS组件放在一行中

1 个答案: