如何在引导中将2列更紧密地放在一起

Question

我试图增加两列之间的巨大差距，并给文本一个较小的宽度，而它的所有仍然集中。

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

​

这是我的代码：

 <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

垫子怎么样？

像这样

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

Answer 2

将类和包含类=‘col 6’的div标记更改为class =‘col 4’，并在它们之间放置一个div选项卡，并在它们之间加上类=‘col 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