溢出文本不对齐

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

图像预览：