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

Bootstrap有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。

希望这可以帮到你。

有关Bootstrap Table的更多参考，请访问：Click Me

图片预览：

溢出文本未对齐

1 个答案: