Question

尝试在我使用Bootstrap Grid创建的两列之间添加一个小间隙，但收效甚微。我尝试了一些不同的东西：

我尝试过设置容器宽度，因为目前它没有容器宽度，只是设置为默认值。
在行类下面添加一个类（这似乎是我探索过的其他提要中的一个常见主题）
更改我正在创建的列的大小。

不幸的是，以上所有内容都没有实现。任何帮助将不胜感激。

HTML

body>
    <div class="container">
        <h1 style= "color: red;"> News </h1>
        <p style= "color: red;"> HEADLINES FROM AROUND THE WORLD </p>
        <div class = "row">
            <div class="col-md-6">
                <h3> Headlines </h3>
                <ul class="tabs">
                    <li>
                        <a href="#World"> World </a>
                    </li>
                    <li>
                        <a href="#Politics"> Politics</a>
                    </li>
                    <li>
                        <a href="#Technology">Technology</a>
                    </li>
                    <li>
                        <a href="#Science">Science</a>
                    </li>
                    <li>
                        <a href="#Entertainment">Entertainment</a>
                    </li>
                </ul>
                <div class = "tab_structure">
                    <div class = "tab" id = "World">
                        <h2></h2>
                        <p>World</p>
                    </div>
                    <div class = "tab" id = "Politics">
                        <h2></h2>
                        <p>Politics</p>
                    </div>
                    <div class = "tab" id = "Technology">
                        <h2></h2>
                        <p>Tech</p>
                    </div>
                    <div class = "tab" id = "Science">
                        <h2></h2>
                        <p>Sci/p>
                    </div>
                    <div class = "tab" id = "Entertainment">
                        <h2></h2>
                        <p>Entertainment/p>
                    </div>
                </div>
                <br>
                <br>
            </div>
            <div class="col-md-6">
                <h3> Most Popular </h3>
                Hello World
                <br>
                <br> 
            </div>
        </div>
    </div>

CSS

.container {

    width: 1200px;
}


**.col-md-6 {

    background-color: pink;
    border: 1px solid #000000;
    border-radius: 10px 10px 10px 10px;
}

.col-md-6 {

    background-color: pink;
    border: 1px solid #000000;
    border-radius: 10px 10px 10px 10px;
}**

使用Bootstrap在列之间添加空格

0 个答案: