Question

大家。我正在使用bootstrap，我想删除红色和绿色网格列之间的空间。（请参阅iamge）。这是我的代码。

<div class="col-xs-6" style='background: red;'>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus aut ducimus ex consequuntur, illo ipsam unde esse reprehenderit placeat assumenda.
</div>
<div class="col-xs-6" style='background: orange;'>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi officia nesciunt excepturi minima at nemo doloremque sunt vel itaque, provident laboriosam incidunt saepe rem, et, architecto pariatur quidem numquam neque esse unde cumque. Reiciendis itaque libero nesciunt, autem est dolor. Placeat autem, voluptate ipsum delectus! Iure eius aliquam ut. Esse?Lorem ipsum dolor sit amet,
</div>

<div class="col-xs-6" style='background: green;'>>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi officia nesciunt excepturi minima at nemo doloremque sunt vel itaque, provident laboriosam incidunt saepe rem, et, architecto paria
</div>

我试图提出一个clearfix类，但它不起作用。

want to remove the space between the red and green grid

Answer 1

您可以在较高的列上使用<activity android:name="com.example.android.GizmosActivity" android:label="@string/title_gizmos" > <intent-filter android:label="@string/filter_title_viewgizmos"> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="http" android:host="www.example.com" android:pathPrefix="/gizmos" /> </intent-filter> </activity>，就像这样..

pull-right

http://codeply.com/go/TytIBOYFcb

注意：这仅适用于此布局。如果您有许多具有可变高度的列，则需要采用detailed in this question

的方法

Answer 2

您必须将red和green放入div。像这样：

在网格系统中，您必须按照此说明操作，然后才能获得所需的结果。

Div 6 + Div 6 = Div 12
In first Div 6:
| red part   |
| green part |

基于您的代码的代码解决方案：

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

           <div class="row"  style='background: red;'>          
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus aut ducimus ex consequuntur, illo ipsam unde esse reprehenderit placeat assumenda.          
           </div>

           <div class="row" style='background: green;'>>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi officia nesciunt excepturi minima at nemo doloremque sunt vel itaque, provident laboriosam incidunt saepe rem, et, architecto paria
           </div>
</div> 


<div class="col-xs-6" style='background: orange;'>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi officia nesciunt excepturi minima at nemo doloremque sunt vel itaque, provident laboriosam incidunt saepe rem, et, architecto pariatur quidem numquam neque esse unde cumque. Reiciendis itaque libero nesciunt, autem est dolor. Placeat autem, voluptate ipsum delectus! Iure eius aliquam ut. Esse?Lorem ipsum dolor sit amet,
 </div>

boostrap柱包装问题

2 个答案: