Question

我正在尝试使用图像设置我的网站，然后在该图像下将有两个SVG文件和两个Bootstrap样式的网格，每个网格包含一个信息表。但是，Bootstrap似乎使它们垂直定向而不是水平定向。你可以看到最终结果here if you scroll to the bottom.正如你所看到的，按性别划分的人口和家庭和家庭表是一个接一个而不是横向的，如我希望他们成为。请在投票之前注意关闭此复制品，以便存在与此类似的其他问题，但我已尝试过其中的解决方案但它们无法正常工作。

我已经包含了HTML相关部分的代码，这有点乱，但是你可以看到Bootstrap使用的<div class="col-xl-6">标签围绕着两个表，但它们仍然是垂直显示的。怎么样？

<div class="container-fluid">
<svg>HUGE SVG LINK REMOVED</svg>
<svg>2ND HUGE SVG LINK REMOVED</svg>
<div class="row">
   <div class="col-xl-6">
      <h3>Population by Gender</h3>
      <div>Male: 627 (44.91%, <a href="/rank/new-york-state--male-population-percentage--block-group-rank.htm?hl=NY0239705001&hlst=NY&yr=8000"></a>)</div>
      <div>Females: 769 (55.09%, <a href="/rank/new-york-state--female-population-percentage--block-group-rank.htm?hl=NY0239705001&hlst=NY&yr=8000"></a>)</div>
      <br>
      <table cellpadding="0">
         <tr>
            <td align="center">Block Group 970500-1</td>
            <td>
               <div>Male: 44.91%</div>
               <div> Female: 55.09%</div>
            </td>
         </tr>
         <tr>
            <td align="center">New York</td>
            <td>
               <div id="pt" >Male: 48.39%</div>
               Female: 51.61%
            </td>
         </tr>
         <tr></tr>
      </table>
      <p class="small">*Based on 2010 data.</p>
   </div>
   <div class="col-xl-6">
      <a name="HouseholdandFamily"></a>
      <h3>Household and Family</h3>
      <table class="tbb tbright" cellpadding="20">
         <tr bgcolor="#eeeeee">
            <td>&nbsp;</td>
            <td><b>Block Group 970500-1</b></td>
         </tr>
         <tr>
            <td>Total Households</td>
            <td>548</td>
         </tr>
         <tr bgcolor="#eeeeee">
            <td>Average Household Size</td>
            <td>2.31,<a href="/rank/new-york-state--average-household-size--block-group-rank.htm?hl=NY0239705001&hlst=NY&yr=8000"></a></td>
         </tr>
         <tr>
            <td>1 Person Households</td>
            <td>185, 33.76%, <a href="/rank/new-york-state--one-person-household-percentage--block-group-rank.htm?hl=NY0239705001&hlst=NY&yr=8000"></a></td>
         </tr>
         <tr bgcolor="#eeeeee">
            <td>2 or More Person Households</td>
            <td>363, 66.24%, <a href="/rank/new-york-state--two-or-more-people-household-percentage--block-group-rank.htm?hl=NY0239705001&hlst=NY&yr=8000"></a></td>
         </tr>
         <tr>
            <td>Family Households (Families)</td>
            <td>321, 58.58%, <a href="/rank/new-york-state--family-household-percentage--block-group-rank.htm?hl=NY0239705001&hlst=NY&yr=8000"></a></td>
         </tr>
         <tr bgcolor="#eeeeee">
            <td>Average Family Size</td>
            <td>2.98, <a href="/rank/new-york-state--average-family-size--block-group-rank.htm?hl=NY0239705001&hlst=NY&yr=8000"></a></td>
         </tr>
         <tr>
            <td>Married-Couple Family</td>
            <td>221, 40.33%, <a href="/rank/new-york-state--married-couple-family-household-percentage--block-group-rank.htm?hl=NY0239705001&hlst=NY&yr=8000"></a></td>
         </tr>
         <tr bgcolor="#eeeeee">
            <td>Nonfamily Households</td>
            <td>227, 41.42%, <a href="/rank/new-york-state--nonfamily-household-percentage--block-group-rank.htm?hl=NY0239705001&hlst=NY&yr=8000"></a></td>
         </tr>
      </table>
   </div>
</div>

Answer 1

您正在使用<div class="col-xl-6">，这意味着此div在超大型显示屏上占用6列，但在较小的显示屏上占用全部宽度。

所以，你可能需要使用像这样小的东西：

<div class="col-md-6"></div>

或

<div class="col-lg-6"></div>

Answer 2

对于“按性别划分的人口”框：将<table>移至<div>元素。
对于每个div元素集类col-xs-6 col-md-6。

您可以在此找到示例：http://getbootstrap.com/examples/grid/

引导使列垂直而不是水平

2 个答案: