Question

我正在尝试将div内容的宽度限制在我的折叠按钮下方。现在，内容（下面代码示例中的lorem）的宽度超过按钮宽度。

如何限制内容的宽度，使其最多与下面img中显示的按钮一样宽？

我尝试将max-width: 75%;添加到内容div（类collapse）中，但是当我添加它时，它搞砸了布局，它看起来像是最底部的截图。

所需：

当我添加max-width: 75%：

时，我知道了

代码：

<div class='text-center'>
  <div class="row main">
    <div class="center-block">
       <div>

         <a class="btn btn-primary custom-btn custom" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
           Link with href
         </a>

         <div class="collapse" id="collapseExample">
           <div class="card card-block">
             Anim pariatur cliche reprehenderit, enim eiusmod high life   accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
             Turkey pastrami spare ribs flank tongue, pork chop drumstick sirloin biltong frankfurter. Flank ball tip sirloin, sausage short loin leberkas short ribs tenderloin boudin. Alcatra ribeye porchetta ball tip pig picanha filet mignon kielbasa fatback jowl kevin. Short ribs pork chop tri-tip fatback kielbasa jowl ham brisket biltong cow beef tail venison. Flank boudin pork loin beef ribs venison kielbasa brisket biltong meatloaf. Pig hamburger beef ribs, pork belly beef turducken tongue spare ribs drumstick kevin jerky tail strip steak prosciutto bacon.

           </div>
         </div>
       </div>
     </div>
  </div>
</div>

CSS：

.custom-btn {
  background-color: #7CA46E;
  color: white;
  margin-top: 20px;
  border-radius: 0;
}

.custom {
  width: 75%;
  min-width: 400px;
}

Answer 1

您需要在展示时将展开目标的display值修改为inline-block。

Bootstrap的折叠功能在未折叠时将折叠目标的display设置为block，导致其与折叠触发器（a.btn元素）的布局不同。您可以使用自己的CSS覆盖此值。

.custom-btn {
  background-color: #7CA46E;
  color: white;
  margin-top: 20px;
  border-radius: 0;
}

.custom,
#collapseExample.in,
#collapseExample.collapsing {
  width: 75%;
  min-width: 400px;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class='text-center'>
  <div class="row main">
    <div class="center-block">
      <div>

        <a class="btn btn-primary custom-btn custom" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
           Link with href
        </a>

        <div class="collapse" id="collapseExample">
          <div class="card card-block">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Turkey pastrami spare ribs flank tongue, pork chop drumstick
            sirloin biltong frankfurter. Flank ball tip sirloin, sausage short loin leberkas short ribs tenderloin boudin. Alcatra ribeye porchetta ball tip pig picanha filet mignon kielbasa fatback jowl kevin. Short ribs pork chop tri-tip fatback kielbasa
            jowl ham brisket biltong cow beef tail venison. Flank boudin pork loin beef ribs venison kielbasa brisket biltong meatloaf. Pig hamburger beef ribs, pork belly beef turducken tongue spare ribs drumstick kevin jerky tail strip steak prosciutto
            bacon.

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如何限制bootstrap上的折叠内容宽度？

1 个答案: