时间戳

首页 > 解决方案 > 使用引导程序在同一行显示项目

css - 使用引导程序在同一行显示项目

问题描述

我试图在同一行中显示一个标签控件、一个文本框和一个按钮，并且不知何故标签控件出现在两行中。我正在使用引导程序。如何在一行中显示标签控件：

<div class="col">
     <b>Please add new box</b> 
    </div>
         <div class="col"><asp:TextBox ID="txtBox" runat="server"></asp:TextBox></div>
         <div class="col"><telerik:RadButton ID="btnAddBox" runat="server" Text="Add Box"></telerik:RadButton></div>

         <div class="col">
             <b>Please add new Folder</b> 
         </div>
         <div class="col"><asp:TextBox ID="txtNewFolder" runat="server"></asp:TextBox></div>
         <div class="col"><telerik:RadButton ID="RadButton1" runat="server" Text="Add Box"></telerik:RadButton></div>
           <div class="col">
       
    </div>

这是它的样子：

在此处输入图像描述

我想要“请添加新框”和“请添加新文件夹”在一行上。

标签： cssbootstrap-4

解决方案

您已使用 6 cols，因此默认情况下每列的宽度为2 cols。并且由于文本较长，因此它不适合该特定宽度，因此将分为 2 行。您可以做的是增加标签cols 的宽度，为此您必须为每个 div 指定 col 跨度值。它会是这样的：

<div class="col-3">
 <b>Please add new box</b> 
</div>
     <div class="col-2"><asp:TextBox ID="txtBox" runat="server"></asp:TextBox></div>
     <div class="col-1"><telerik:RadButton ID="btnAddBox" runat="server" Text="Add Box"></telerik:RadButton></div>

     <div class="col-3">
         <b>Please add new Folder</b> 
     </div>
     <div class="col-2"><asp:TextBox ID="txtNewFolder" runat="server"></asp:TextBox></div>
     <div class="col-1"><telerik:RadButton ID="RadButton1" runat="server" Text="Add Box"></telerik:RadButton></div>

这是一种方法。您始终可以将flex属性与 一起使用flex-wrap: nowrap，或使用word-break属性。我希望你能明白。

推荐阅读