Question

在以下代码中，如何获取标题，modprobe foo及其兄弟<h2>框触及它的父<ul>，删除填充父母或任何其他更好的方式？

删除父级的填充，它会影响兄弟姐妹<div class="col-sm-5 why-us">的间距，边距，填充或任何嵌套的列div导致网格设计损坏。它会影响电网的响应能力吗？

div.user-profile

DESIGN

ROW＆＃39> html

          <!-- WHY US -->
                <div class="col-sm-5 why-us">
                    <h2>
                        <span class="glyphicon glyphicon glyphicon-ok-sign"></span>
                        Why Us
                    </h2>
                    <ul>
                        <li>Item 1</li> 
                        <li>Item 2</li>
                        <li>Item 3</li>
                        <li>Item 4</li>
                    </ul>
                </div>

Answer 1

我认为您希望将这两个部分分开。请试试这个结构。它不会影响您的响应式设计。

<div class="container-fluid col-profile">
        <div class="container"> 
            <div class="row">

                <!-- PROFILE -->
                <div class="col-sm-7">
                    <div class="user-profile">
                        <img src="images/thumbnail.jpg" />
                        <div class="description">
                            <h2 class="name">User Name</h2>
                            <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil voluptate qui perspiciatis modi, velit veniam. Harum tempora ipsum et quae excepturi aut ex ratione, unde fugiat, architecto distinctio quasi, omnis! 
                            </p>
                        </div>
                    </div>
                </div>

                <!-- WHY US -->
                <div class="col-sm-5">
                    <div class="why-us">
                        <h2>
                            <span class="glyphicon glyphicon glyphicon-ok-sign"></span>
                            Why Us
                        </h2>
                        <ul>
                            <li>Item 1</li> 
                            <li>Item 2</li>
                            <li>Item 3</li>
                            <li>Item 4</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 2

我想你想要这个。您可以在不触及引导代码或删除边距/填充且不破坏任何响应部分的情况下执行此操作。

.why-us{background-color: darkgreen;}
.xcol{background-color: green;}

<div class="container-fluid col-profile">
        <div class="container"> 
            <div class="row">

                <!-- PROFILE -->
                <div class="col-sm-7">
                    <div class="user-profile">
                        <img src="images/thumbnail.jpg" />
                        <div class="description">
                            <h2 class="name">User Name</h2>
                            <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil voluptate qui perspiciatis modi, velit veniam. Harum tempora ipsum et quae excepturi aut ex ratione, unde fugiat, architecto distinctio quasi, omnis! 
                            </p>
                        </div>
                    </div>
                </div>

                <!-- WHY US -->
                <div class="xcol col-sm-5">
                  <div class="row">  
                  <div class="why-us col-md-12">
                        <h2>
                            <span class="glyphicon glyphicon glyphicon-ok-sign"></span>
                            Why Us
                        </h2>
                    </div>
                    </div>
                      <div class="row">
                      <div class="xcont">
                        <ul>
                            <li>Item 1</li> 
                            <li>Item 2</li>
                            <li>Item 3</li>
                            <li>Item 4</li>
                        </ul>
                        </div>
                        </div>
                    </div>
               
            </div>
        </div>
    </div>

Bootstrap 3：让子div接触父容器，删除父填充的效果？

2 个答案: