在Bootstrap中将2列彼此对齐

Question

试图简单地使两个盒子彼此相邻，一个在左边，另一个在右边。 然后，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>

您无需使用引导网格示例即可编写自定义CSS，就可以实现您要实现的目标。 另外，Bootstrap具有按定义的类，您可以使用例如

在这里您将文本居中对齐

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

但是您不需要align="center" ，引导程序会为其按定义的类分配给任何元素的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>