Bootstrap列重叠移动文本

Question

我是Bootstrap的新手（不到一周的经验），我遇到了一个烦人的小问题。调整大小后，我的一个列中的文本开始在其下方的列下滑动。我尝试将文本放在自己的容器中，并将所有容器从.container-fluid更改为.table > tbody > tr > td { vertical-align: middle; } h1 { font-family: 'Great Vibes', Helvetica, sans-serif; font-size: 50px; color: white; } .table > tbody > tr:hover { background-color: #333333; }，但似乎没有任何效果。

可以访问该网站here，相关的代码段位于

之下

<div class="col-sm-7" style="background-color: #111313; height: 600px; color: white; min-height: 500px; margin-bottom: 20px">
  <h1 style="text-align: center;">Sara Manning<br/> Orchestra</h1>
  <iframe class="img-responsive center-block" style="height: 60%; width: 75%" src="https://www.youtube.com/embed/rOjHhS5MtvA" frameborder="0" allowfullscreen></iframe>
  <hr/>
  <p style="word-wrap: break-word; margin-bottom: 40px; width: 75%; margin: auto;">   The Sara Manning Orchestra is a highly trained group of musicians from all over the world. Our orchestra consists of nearly 80 world renowned musicians. Our conductor, Sara Manning, is skilled enough to have conducted The London Symphony Orchestra when their conductor called in sick. Our musicians are really good too. We've got those guys that play those things with the strings, and some girls who play those big metal tubes you blow on.
    <br/>
  </p>
</div>
<div class="col-sm-5" style="background-color: black; min-height: 600px; color: white; border-top-left-radius: 20px; border-bottom-left-radius: 20px;">
  <h2 style="text-align: center">Upcoming Tourdates</h2>
  <table class="table">
    <thead>
      <th>Location</th>
      <th>Date</th>
      <th>Ticket Info</th>
    </thead>
    <tbody>
      <tr>
        <td>
          The Kentucky Theatre 
          <p class="text-muted">Lexington, KY</p>
        </td>
        <td>Oct. 22</td>
        <td><button class="btn btn-primary">Get Tickets</button></td>
      </tr>
      <tr>
        <td>
          The Civic Auditorium
          <p class="text-muted">Knoxville, TN</p>
        </td>
        <td>Oct. 31</td>
        <td><button class="btn btn-primary">Get Tickets</button></td>
      </tr>
      <tr>
        <td>
          The Sydney Opera House
          <p class="text-muted">Sydney, New South Wales, Australia</p>
        </td>
        <td>Nov. 30</td>
        <td>
          <h3 class="text-danger">Sold Out</h3>
        </td>
      </tr>
      <tr>
        <td>
          Bob's House of Music 'n Stuff
          <p class="text-muted">An Undisclosed Basement In Queens, NY</p>
        </td>
        <td>Dec. 25</td>
        <td><button class="btn btn-primary">Get Tickets</button></td>
      </tr>
      <tr>
        <td>
          Batman's Cave
          <p class="text-muted">Gotham, USA</p>
        </td>
        <td>Dec. 31</td>
        <td>
          <h3 class="text-danger">Sold Out</h3>
        </td>
      </tr>
    </tbody>
  </table>
</div>
</div>

pip install openexr

Answer 1

从height: 600px;中删除col-sm-7。也许你想要min-height？由于您强制它始终为600px高，当col-sm-7中的内容超过600px时，它下方的div将重叠。

＆＃13;

＆＃13;

.table > tbody > tr > td {
    vertical-align: middle;
}
h1 {
    font-family: 'Great Vibes', Helvetica, sans-serif;
    font-size: 50px;
    color: white;
}
.table > tbody > tr:hover {
    background-color: #333333;
}

＆＃13;

<!-- remove height: 600px; -->
<div class="col-sm-7" style="background-color: #111313; color: white; min-height: 500px; margin-bottom: 20px">
  <h1 style="text-align: center;">Sara Manning<br/> Orchestra</h1>
  <iframe class="img-responsive center-block" style="height: 60%; width: 75%" src="https://www.youtube.com/embed/rOjHhS5MtvA" frameborder="0" allowfullscreen></iframe>
  <hr/>
  <p style="word-wrap: break-word; margin-bottom: 40px; width: 75%; margin: auto;">   The Sara Manning Orchestra is a highly trained group of musicians from all over the world. Our orchestra consists of nearly 80 world renowned musicians. Our conductor, Sara Manning, is skilled enough to have conducted The London Symphony Orchestra when their conductor called in sick. Our musicians are really good too. We've got those guys that play those things with the strings, and some girls who play those big metal tubes you blow on.
    <br/>
  </p>
</div>
<div class="col-sm-5" style="background-color: black; min-height: 600px; color: white; border-top-left-radius: 20px; border-bottom-left-radius: 20px;">
  <h2 style="text-align: center">Upcoming Tourdates</h2>
  <table class="table">
    <thead>
      <th>Location</th>
      <th>Date</th>
      <th>Ticket Info</th>
    </thead>
    <tbody>
      <tr>
        <td>
          The Kentucky Theatre 
          <p class="text-muted">Lexington, KY</p>
        </td>
        <td>Oct. 22</td>
        <td><button class="btn btn-primary">Get Tickets</button></td>
      </tr>
      <tr>
        <td>
          The Civic Auditorium
          <p class="text-muted">Knoxville, TN</p>
        </td>
        <td>Oct. 31</td>
        <td><button class="btn btn-primary">Get Tickets</button></td>
      </tr>
      <tr>
        <td>
          The Sydney Opera House
          <p class="text-muted">Sydney, New South Wales, Australia</p>
        </td>
        <td>Nov. 30</td>
        <td>
          <h3 class="text-danger">Sold Out</h3>
        </td>
      </tr>
      <tr>
        <td>
          Bob's House of Music 'n Stuff
          <p class="text-muted">An Undisclosed Basement In Queens, NY</p>
        </td>
        <td>Dec. 25</td>
        <td><button class="btn btn-primary">Get Tickets</button></td>
      </tr>
      <tr>
        <td>
          Batman's Cave
          <p class="text-muted">Gotham, USA</p>
        </td>
        <td>Dec. 31</td>
        <td>
          <h3 class="text-danger">Sold Out</h3>
        </td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;