Question

我有两个div在手机屏幕上占据100％的宽度。在大屏幕上我希望它们只占宽度的50％并将它们显示在同一行中（如内联块属性）。我在CSS中尝试了很多东西但到目前为止没有任何工作。非常感谢。

  <div class="container-fluid" id="about">
   <div class="row">
    <div class="col-xs-12 col-md-6"> 
     <h1 class="middle-align">About</h1>
   </div>

   </div> <!--row-->
  </div> <!--about-->

<div class="container-fluid" id="about-content">
 <div class="row">
  <div class="col-xs-12 col-md-6">
   <p>Some content about me</p>
  </div>

 </div> <!--row-->
</div> <!--about-content-->

Answer 1

尝试使用CSS3 Conditional Rules

@media screen and (min-width: 1000px) {

   /* CSS Goes here! */

}

Answer 2

您可以做的是嵌套row。这样做：

 <div class="container>
   <div class="row">
    <div class="col-sm-6 col-xs-12">
     <div class="row">
        <div class="col-xs-12 col-md-6"> 
         <h1 class="middle-align">About</h1>
       </div>

       </div> <!--row-->
    </div> <!--end of col-->
    <div class="col-sm-6 col-xs-12">
   <div class="row">
      <div class="col-xs-12 col-md-6">
       <p>Some content about me</p>
      </div>
     </div> <!--row-->
    </div><!--end of col-->
    </div> <!--end of parent row-->
</div>

Answer 3

将列合并为一行，如下所示。对于小屏幕，列将包裹成两行。对于较大的屏幕，您可以并排放置两列。

<div class="container-fluid" id="about">
    <div class="row">
        <div class="col-xs-12 col-md-6"> 
            <h1 class="middle-align">About</h1>
        </div>
        <div class="col-xs-12 col-md-6">
            <p>Some content about me</p>
        </div>
    </div> <!--row-->
</div> <!--about-->

Answer 4

这是您需要的代码：

<div class="container-fluid">
   <div class="row">
      <div class="col-xs-12 col-md-6" id="about"> 
       <h1 class="middle-align">About</h1>
      </div><!--about-->
      <div class="col-xs-12 col-md-6" id="about-content">
        <p>Some content about me</p>
      </div><!--about-content-->
  </div> <!--row-->
</div><!--container-fluid-->

Bootsrap：我怎样才能在大屏幕上并排放置两排？

4 个答案: