我正在使用asp.net webform和Bootstrap 5.2,我创建了一个包含标签、多行文本框和两个其他按钮的行。当我使用这个类作为row align-items-center时,所有内容都是对齐的。但问题是标签和两个文本框从中心水平下降了30 px。为什么?我必须给予一个额外的margin-bottom-30 px来使它们在中心对齐?请指引我。“
<div align="center" class="container ">
<div class="row align-items-center " style="width: 70%; ">
<div class="col-2 rta " style="margin-bottom:30px;">
<asp:Label ID="Label" runat="server" Text=" Comments:" ></asp:Label>
</div>
<div class="col-3 " >
<asp:TextBox ID="txtcomments" CssClass="form-control dkborder" runat="server" Rows="5" TextMode="MultiLine" ReadOnly="True"></asp:TextBox>
</div>
<div class="col-3 "style="margin-bottom:30px;">
<asp:Button ID="BaupleViewReport" runat="server" Style="position: relative;" CssClass="mybutton" Text="View Report" />
</div>
<div class="col-3 "style="margin-bottom:30px;">
<asp:Button ID="DownloadDrawing" runat="server" Style="position: relative;" CssClass="mybutton" Text="Download Drawing" />
</div>
</div>
</div>
'
4个组件没有完全水平对齐,我不得不给予30 px的边距底部来对齐它们。
1条答案
按热度按时间dluptydi1#
如果希望对齐元素,使其在网格中居中,则可以在
.row
元素上使用.justify-content-center
类。