需要將所有CSS組件放在同一行中

如圖所示，我有下面的組件，因爲它們不在同一行。我已經嘗試了幾乎所有的CSS組件，但沒有爲我工作。我是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>

來源

2017-07-15 Gagandeep Singh Randhawa

使用'flex'得到一樣。 – LKG

請給我們一個乾淨的[mcve]。這是你的代碼bootstrap - 這是一團糟，看起來不像你的截圖。 https://codepen.io/mcoker/pen/BZbXPK –

在你的代碼

<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的是高達12列添加無包裝新的div他們在與class =「行」的div

，只要你做，你必須先綁定它帶class =「行」

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

來源

2017-07-15 17:44:55

需要將所有CSS組件放在同一行中

回答

相關問題