我的解决方案

Question

我使用自举网格来获得响应式布局。

但我无法消除两列之间的差距。我的代码如下：

      <div class="contact-us-box"> 
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-2 col-md-2">

                    </div>
                    <div class="col-lg-6 col-md-7 col-sm-8 col-xs-12 text-center">
                        <p class="contact-us-footer">Choose Share&Care as your development partner </p>
                    </div>
                    <div class="col-lg-4 col-md-3 col-sm-4 col-xs-12 text-center">
                        <a class="contact-us-link" href="../contact-us.php">
                            <i class="fa fa-envelope-o"></i> Contact Now!
                        </a>
                    </div>
                </div>
            </div>
        </div>

我的输出是：

我想删除合作伙伴和立即联系按钮之间的差距。

请帮助我这方面。

我的解决方案

这是我的解决方案：

<div class="contact-us-box"> 
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-8 col-md-8 col-sm-9 col-xs-12 contact-us-gap-p">
                    <p class="contact-us-footer">Choose Share&Care as your development partner </p>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-3 col-xs-12 contact-us-gap-a">
                    <a class="contact-us-link" href="contact-us.php">
                        <i class="fa fa-envelope-o"></i> Contact Now!
                    </a>
                </div>
            </div>
        </div>
    </div>

这是我的css文件：

.contact-us-gap-p{
   text-align: right;
}
.contact-us-gap-a{
    text-align: left;
}

@media (max-width: 768px) {
    .contact-us-gap-p{
        text-align: center;
    }
    .contact-us-gap-a{
        text-align: center;
    }
}

这段代码对我来说很好。

Answer 1

这里我使用css内联来实现简洁，但使用class更好。我只是简单地对齐了两个div的文本，以减少两列之间的差距。

Execution failed for task ':Project:transformClassesWithDexForLiteDebug'.
> com.android.build.api.transform.TransformException: com.android.ide.common.process.ProcessException: java.util.concurrent.ExecutionException: com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command '/Library/Java/JavaVirtualMachines/jdk1.8.0_31.jdk/Contents/Home/bin/java'' finished with non-zero exit value 3

如果您不希望在移动版中应用此功能，请将此代码插入媒体查询仅供屏幕使用 ....

bootstrap网格系统：如何消除两列之间的差距

我的解决方案

1 个答案: