Question

尝试简单地将2个盒子彼此相邻，一个在左边，另一个在右边。然后mytitle框将在手机上扩展为全宽。

我是否需要添加浮点数？如果我已经定义了一个类，我该如何添加？我到目前为止的代码......

<div class="container">
    <div class="row">
          <div class="col-xs-12 col-sm-6">
              <p class="mytitle" align="center"><strong>Information</strong></p>
              <p><br></p>
              <p class="info-news"><img src="image/catalog/bullet.png" width="18"   height="20"><a href="http://example.com/information_id=4" target="">Our team</a></p>
              <p class="infonews"><img src="image/catalog/bullet.png" width="18" height="20"> <a href="http://example.com/information_id=6" target="">Couriers</a></p>
              <p class="infonews"><img src="image/catalog/bullet.png" width="18" height="20">   <a href="http://example.com/information_id=8" target="">Refunds</a></p>

          <div class="col-sm-6 hidden-xs">
              <div id="signup">
                  <a href="http://http://example.com/signup.php"><img class="center-block img-responsive" src="image/catalog/signupbox.png" width="405" height="200"></a>
              </div>
          </div>
    </div>
</div>

Answer 1

正如Shehary提到的，您的第一列缺少结束</div>标记。

还尝试向大屏幕的列添加类（col-lg-6）。见下面的例子：

<div class="container">
<div class="row">
    <div class="col-xs-12 col-sm-6 col-lg-6">
        <p class="mytitle" align="center"><strong>Information</strong></p>
        <p><br></p>
        <p class="info-news"><img src="image/catalog/bullet.png" width="18"   height="20"><a href="http://example.com/information_id=4" target="">Our team</a></p>
        <p class="infonews"><img src="image/catalog/bullet.png" width="18" height="20"> <a href="http://example.com/information_id=6" target="">Couriers</a></p>
        <p class="infonews"><img src="image/catalog/bullet.png" width="18" height="20">   <a href="http://example.com/information_id=8" target="">Refunds</a></p>
    </div>

    <div class="col-sm-6 hidden-xs col-lg-6">
        <div id="signup">
            <a href="http://http://example.com/signup.php"><img class="center-block img-responsive" src="image/catalog/signupbox.png" width="405" height="200"></a>
        </div>
    </div>
</div>

您无需使用bootstrap grid examples编写自定义CSS即可实现您要实现的目标。 Bootstrap也有你可以使用的每个定义的类，例如

在此处将文本对齐

<p class="mytitle" align="center"><strong>Information</strong></p>

但是你不需要align="center"，bootstrap有它的每个定义的类class="text-center"分配给任何元素会使它成为中心。

<p class="mytitle text-center"><strong>Information</strong></p>

Answer 2

这对我来说效果很好，请尝试..不需要添加浮动等：）

<div class="container">
     <div class="row">
      <div class="col-xs-12 col-sm-6">
          <p class="mytitle" align="center"><strong>Information</strong></p>
          <p class="info-news">
            <img src="image/catalog/bullet.png" width="18"   height="20">
            <a href="http://example.com/information_id=4" target="">
                Our team
            </a>
          </p>
          <p class="infonews">
            <img src="image/catalog/bullet.png" width="18" height="20"> 
            <a href="http://example.com/information_id=6" target="">
                Couriers
            </a>
          </p>
          <p class="infonews">
            <img src="image/catalog/bullet.png" width="18" height="20">   
            <a href="http://example.com/information_id=8" target="">
                Refunds
            </a>
          </p>
 </div>
 <div class="col-sm-6 hidden-xs">
  <div id="signup">
   <a href="http://http://example.com/signup.php"><img class="center-block img-responsive" src="image/catalog/signupbox.png" width="405" height="200"></a>
 </div>
  </div>
 </div>
</div>

在Bootstrap中将两列彼此对齐

2 个答案: