Question

我正在尝试增加2列之间的巨大差距，并为文本提供更小的宽度，同时保持它仍然居中。

正如你所看到的那样，它们非常分散，我真的希望差距最小以及文本的宽度。我想尝试将左图像右上角和右图像左下角放在程序文本下面。

这是我的代码：

 <div class="container">
    <div class="row col-md-12">
        <p class="text-center program-head">Programs</p>
        <div class="col-md-6">
            <div class="text-center">
                <img alt="" class="resize-image" id="image1" src=
                "/wp-content/themes/creativeforces/images/april2.jpg">
                <p class="program-text">Creative Writing</p>
                <p>This will help unleash a childs mind throught their own
                words. The imagination has no limit to a young childs mind.
                this is future forever in life yes hold me
                now</p><button class="btn btn-primary">Learn More</button>
            </div>
        </div>
        <div class="col-md-6">
            <div class="text-center">
                <img alt="" class="resize-image" id="image2" src=
                "/wp-content/themes/creativeforces/images/kids.png">
                <p class="program-text">Improv &amp; Comedy</p>
                <p>This improv class is a fun and non-stressful way to
                encourage children and young adults to communicate and
                build confidence! Students will learn how to think on their
                feet when expanding on an idea, story, or debate. These
                classes are inspired by <a href=
                "http://www.zipzapzopimprov.com/">Zip Zap
                Zop</a></p><button class="btn btn-primary">Learn
                More</button>
            </div>
        </div>
    </div>
</div>

任何帮助将不胜感激！

Answer 1

填充怎么样？

Like this

.col-md-6 p { padding: 0 45px; }

Answer 2

将class ='col-md-6'的div标签更改为class ='col-md-4'并在它们之间添加一个div选项卡，使用class ='col-md-2'并编写文本这里

如下所示：

<div class="container">
    <div class="row col-md-12">
        <p class="text-center program-head">Programs</p>
        <div class="col-md-4">
            <div class="text-center">
                <img alt="" class="resize-image" id="image1" src=
                "/wp-content/themes/creativeforces/images/april2.jpg">
                <p class="program-text">Creative Writing</p>
                <p>This will help unleash a childs mind throught their own
                words. The imagination has no limit to a young childs mind.
                this is future forever in life yes hold me
                now</p><button class="btn btn-primary">Learn More</button>
            </div>
        </div>
        <div class="col-md-2">
               your text here
        </div>
        <div class="col-md-4">
            <div class="text-center">
                <img alt="" class="resize-image" id="image2" src=
                "/wp-content/themes/creativeforces/images/kids.png">
                <p class="program-text">Improv &amp; Comedy</p>
                <p>This improv class is a fun and non-stressful way to
                encourage children and young adults to communicate and
                build confidence! Students will learn how to think on their
                feet when expanding on an idea, story, or debate. These
                classes are inspired by <a href=
                "http://www.zipzapzopimprov.com/">Zip Zap
                Zop</a></p><button class="btn btn-primary">Learn
                More</button>
            </div>
        </div>
    </div>
</div>

Answer 3

您可以将第一列偏移一个单位，将两者缩小到5个单位。

<div class="container">
    <div class="row col-md-12">
        <p class="text-center program-head">Programs</p>
        <div class="col-md-5 col-md-offset-1">
            <div class="text-center">
                <img alt="" class="resize-image" id="image1" src=
                "//placehold.it/300">
                <p class="program-text">Creative Writing</p>
                <p>This will help unleash a childs mind throught their own
                words. The imagination has no limit to a young childs mind.
                this is future forever in life yes hold me
                now</p><button class="btn btn-primary">Learn More</button>
            </div>
        </div>
        <div class="col-md-5">
            <div class="text-center">
                <img alt="" class="resize-image" id="image2" src=
                "//placehold.it/300">
                <p class="program-text">Improv &amp; Comedy</p>
                <p>This improv class is a fun and non-stressful way to
                encourage children and young adults to communicate and
                build confidence! Students will learn how to think on their
                feet when expanding on an idea, story, or debate. These
                classes are inspired by <a href=
                "">Zip Zap
                Zop</a></p><button class="btn btn-primary">Learn
                More</button>
            </div>
        </div>
    </div>
</div>

http://codeply.com/go/KRPiGeNSpm

如何在引导程序中将2列放在一起

3 个答案: