オーバーフローテキストが整列していません

Question

私はhtmlとcssで新しく、これは簡単な質問かもしれません。 私はこのコードを使用しています：

htmlコード：

<div class="container" > 

    <div class="row"> 
    <fieldset class="for-panel"> 
     <legend>Project Info</legend> 
     <div class="row"> 
     <div class="col-sm-6"> 
      <div class="form-horizontal"> 
      <label class="col-xs-5 control-label">Name:</label> 
      <p class="form-control-static">Batman</p> 
      <label class="col-xs-5 control-label">Description: </label> 
      <p class="form-control-static">Batman is a fictional superhero appearing in American comic books published by DC Comics. The character was created by artist Bob Kane and writer Bill Finger,[4][5] and first appeared in Detective Comics #27 (1939). Originally named the "Bat-Man", the character is also referred to by such epithets as the Caped Crusader, the Dark Knight, and the World's Greatest Detective.[6]</p> 
     </div> 
     </div> 
     <div class="col-sm-6"> 
      <div class="form-horizontal"> 
      <label class="col-xs-4 control-label">Name: </label> 
      <p class="form-control-static">Joker </p> 


      <label class="col-xs-4 control-label">Description:</label> 
      <p class="form-control-static">The Joker is a fictional supervillain created by Bill Finger, Bob Kane, and Jerry Robinson who first appeared in the debut issue of the comic book Batman (April 25, 1940) published by DC Comics. Credit for the Joker's creation is disputed; Kane and Robinson claimed responsibility for the Joker's design, while acknowledging Finger's writing contribution. Although the Joker was planned to be killed off during his initial appearance, he was spared by editorial intervention, allowing the character to endure as the archenemy of the superhero Batman.</p> 
      </div> 
     </div> 
     </div> 
    </fieldset> 
    </div> 
</div> 

CSSコード：

fieldset.for-panel { 
    background-color: #fcfcfc; 
    border: 1px solid #999; 
    border-radius: 4px; 
    padding:15px 10px; 
    background-color: #d9edf7; 
    border-color: #bce8f1; 
    background-color: #f9fdfd; 
    margin-bottom:12px; 
} 
fieldset.for-panel legend { 
    background-color: #fafafa; 
    border: 1px solid #ddd; 
    border-radius: 5px; 
    color: #4381ba; 
    font-size: 14px; 
    font-weight: bold; 
    line-height: 10px; 
    margin: inherit; 
    padding: 7px; 
    width: auto; 
    background-color: #d9edf7; 
    margin-bottom: 0; 
} 
#containerProjectInfo{ 

    margin-top: 1%; 
    width:90%; 


} 

をこれがimage

結果であるが、私は希望のように、それは動作しません。 。オーバーフローテキストがある場合の説明では、行は一列に並ばず、説明ラベルの一番下から始まります。 ord-wrap: break-wordを使用しようとしましたが、結果は出ませんでした。

が

Answer 1

ありがとうブートストラップは、12列を持っており、あなたがそれらを分割するとき、彼らは内部の別の12列があります。 <div class="row">を使用して、列の分割を正しく行うようにしてください。コンテナ/列内のパーツは必ず分離してください。 私はHTMLコードのみを変更しました。 CSSは変更されていません！ここで

はHTMLコードです：それは合わせなかったことにはいくつかのパディングを持っていたので、これはあなたの問題を解決する必要があり

<div class="container-fluid"> 
<div class="row"> 
    <fieldset class="for-panel"> 
     <legend>Project Info</legend> 
      <div class="row"> 
       <!-- First Column --> 
       <div class="col-xs-6"> 
        <div class="row"> <!-- name row --> 
         <div class="col-xs-2"> 
          <label>Name:</label> 
         </div> 
         <div class="col-xs-10"> 
          <p>Batman</p> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-xs-2"> 
          <label>Description: </label> <!-- description row --> 
         </div> 
         <div class="col-xs-10"> 
          <p>Batman is a fictional superhero appearing in American comic books published by DC Comics. The character was created by artist Bob Kane and writer Bill Finger,[4][5] and first appeared in Detective Comics #27 (1939). Originally named the "Bat-Man", the character is also referred to by such epithets as the Caped Crusader, the Dark Knight, and the World's Greatest Detective.[6]</p> 
         </div> 
        </div> 
       </div> 
       <!-- Second Column --> 
       <div class="col-xs-6"> 
        <div class="row"> <!-- name row --> 
         <div class="col-xs-2"> 
          <label>Name:</label> 
         </div> 
         <div class="col-xs-10"> 
          <p>Joker</p> 
         </div> 
        </div> 
        <div class="row"> <!-- description row --> 
         <div class="col-xs-2"> 
          <label>Description: </label> 
         </div> 

         <div class="col-xs-10"> 
          <p>The Joker is a fictional supervillain created by Bill Finger, Bob Kane, and Jerry Robinson who first appeared in the debut issue of the comic book Batman (April 25, 1940) published by DC Comics. Credit for the Joker's creation is disputed; Kane and Robinson claimed responsibility for the Joker's design, while acknowledging Finger's writing contribution. Although the Joker was planned to be killed off during his initial appearance, he was spared by editorial intervention, allowing the character to endure as the archenemy of the superhero Batman.</p> 
         </div> 
        </div> 
       </div> 
      </div>    
    </fieldset> 
</div> 

、しかし、私はまた、名前のクラスを削除しましたテキストが正しく表示されます。それを追加してCSSを修正することができます。

これがあなたを助けてくれることを願っています。ブートストラップ表について

以上の基準は、ここで見つけることができます：Click Me

イメージプレビュー：は