Question

我有一个网页，整页分为左右两部分。分区如下所示。在左侧部分，我有两个并排按钮，其中一个按钮具有长文本字符串作为“编辑类别”。此按钮溢出文本，最终折叠并堆叠在另一个上面。我是开发人员，但我并不是真正的设计。尝试使用flex但似乎无法正常工作。这个预期的行为是两个按钮应该在大屏幕中并排，并以中小和超小分辨率堆叠。我还尝试将col-sm, col-md, col-xs放在包含<a>但是noluck的div上。

 <!-- Start Left Section -->
    <div class="col-lg-3 col-md-4 col-sm-12 col-xs-12 animated fadeInLeft categories-lst">
        <div class="row">
            <div class="col-lg-6">
               <a onclick="toggleLoader('show')" href="/Rec/EditCategories" class="btn btn-default btn-block"><span><i class="fa fa-pencil"></i>Edit Categories</span></a>
            </div>
            <div class="col-lg-6">
               <a onclick="showNewPost();" class="btn btn-default btn-block" id="showNewPost"><span><i class="fa fa-plus"></i> New Post</span> </a>
            </div>
         </div>
    </div>
    <!-- Start Right Section-->
    <div class="col-lg-9 col-md-8 col-sm-12 col-xs-12 animated fadeInRight">
    </div>

Answer 1

要达到预期效果，请使用以下选项

a{
    white-space:normal !important;
    word-wrap: break-word; 
}

代码示例 - https://codepen.io/nagasai/pen/MVRwoN

并排Bootstrap按钮文本溢出

1 个答案: