ブートストラップで折り畳みコンテンツの幅を制限する方法は？

Question

私の折りたたみボタンの下にdivコンテンツの幅を制限しようとしています。 現在、コンテンツ（下のコード例のlorem）の幅はボタンの幅を超えています。

コンテンツの幅を、以下のimgのように最大幅に制限するにはどうすればよいですか？

私はコンテンツ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; 
} 

私は max-width: 75%を追加したとき

がこれを手に入れました

Answer 1

畳み込みターゲットのdisplayの値をinline-blockに変更する必要があります。

ブートストラップの折りたたみ機能は、それが崩壊トリガー（a.btn要素）とは異なるレイアウトする原因と崩れないblockに崩壊対象のdisplayを設定します。この値は独自の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>