すべてのCSSコンポーネントを1行に表示する必要があります

Question

以下のコンポーネントは、図のように並んでいません。私はほぼすべてのCSSコンポーネントを試しましたが、何も私のために働いていません。私はCSSが初めてです。誰も私をここで助けてください。

要件：

1. テキストと減少するために必要な最初のリストボックスの間の距離。
   
2. すべてのコンポーネントは1行にする必要があります。ここで

   

はコードです：あなたのコード内

<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> 

あなたはラップなしで12のカラム件まで追加COL-MDさんとの新しいdiv要素を配置していますdiv =クラス "行"

あなたが最初にあなたのコードのこの部分のように記述する必要があります例えば、クラス=「行」

と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>