Question

我通常能够做到这一点。但出于某种原因，我所尝试过的一切都不起作用。

我已经尝试了

 <div class="row">
   <div class="col-md-8">
        <button>Toronto</button>
        <button>Markham</button>
        <button>Petawawa</button>
   </div>
   <div class="col-md-4">
        <p>date</p>
        <p>date</p>
        <p>date</p>
   </div>
 </div>

类似的变化，但我似乎无法将日期和事件位置排成一行。

发生问题的代码：

<div id="Location">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-xs-12 aboutCopyContainer">
        <p class="copyHeader" style="font-family: testFont;">Locations</p>
        <p class="faqContent">Fall for the FEAST at an event near you!</p>
        <div class="row">
            <div class="col-md-6">
                <div class="btnLocationCont">

<button class="btn btn-primary btn-lg locationBtn locationButtonText" style="font-family: AvenirNextLTPro-Condensed;" onclick="window.location.href='http://convio.cancer.ca/site/PageNavigator/UFE_ON_Oktoberfeast_Toronto.html'">Toronto</button>


          <div class="locationDateCont">
                      <p class="locatDay eventTimeBut">14</p>
                      <hr style="margin:0px;" />
                      <p class="locatMonth eventTimeBut">Oct</p>
                  </div>
              </div>
          </div>


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

             <div class="btnLocationCont">
<button class="btn btn-primary btn-lg locationBtn locationButtonText" style="font-family: AvenirNextLTPro-Condensed;" onclick="window.location.href='http://convio.cancer.ca/site/PageNavigator/UFE_ON_Oktoberfeast_Petawawa.html'">Petawawa</button>
            <div class="locationDateCont">
            <p class="locatDay eventTimeBut">7</p>
            <hr style="margin:0px;"/>
            <p class="locatMonth eventTimeBut">Oct</p>
            </div>
           </div> 

      <div class="btnLocationCont">
<button class="btn btn-primary btn-lg locationBtn locationButtonText" style="font-family: AvenirNextLTPro-Condensed;" onclick="window.location.href='http://convio.cancer.ca/site/PageNavigator/UFE_ON_Oktoberfeast_Markham.html'">Markham</button>
            <div class="locationDateCont">
            <p class="locatDay eventTimeBut">22</p>
            <hr style="margin:0px;"/>
            <p class="locatMonth eventTimeBut">Oct</p>
            </div>
            </div>



         </div>
      </div>
    </div>
  </div>
</div>

以下是发生了什么事的JS小提琴： JSFiddle

这是网站（在“地点”部分下），让您更好地了解我尝试做什么（应用css样式等）。

Oktoberfeast Locations

非常感谢任何建议！谢谢你的时间

Answer 1

您在bootstrap列子项中添加了固定width。并且该宽度与其他元素宽度一起应用了bootsrap列宽，因此类locationDateCont出现在下面：

因此，在您的CSS文件中，从该类中删除该宽度，然后添加：

.btnLocationCont {
 width: auto;
}

希望这有帮助！

Answer 2

你可能不想这样做。原因是在移动设备上他们赢得了不匹配。

要将它们放在一起并在桌面和移动设备上显示，您可以执行以下操作：

 <div class="row">
   <div class="col-md-4">
        <button>Toronto</button>
        <p>date</p>
   </div>
   <div class="col-md-4">
        <button>Markham</button>
        <p>date</p>
   </div>
      <div class="col-md-4">
        <button>Petawawa</button>
        <p>date</p>
   </div>
 </div>

小提琴：

https://jsfiddle.net/8t5mjhf8/4/

编辑：要确保按钮位于按钮旁边，您需要以下CSS。您需要为p指定一个类，以免干扰其他段落。

p {
display: inline; 
}

如何获得bootstrap col并排出现

2 个答案: