无法获取 Bootstrap 布局上的列内容以与列左侧对齐

Question

我正在研究 http://pizzli.com/ephraimwp/inner-page-1/。我正在尝试让#innernav 的内容（包含 ul）浮动到它所在列的左边缘，以便与#bannerbar 对齐。请在下面查看我的代码。

<div id="bannerbar"><?php the_title();?></div>
    <div class="row" style="padding-top:35px;">
    <div class="col-md-4">

    <div id="innernav">
    <ul>
    <li>Our Purpose</li>
    <li>Why Choose PSP</li>
    <li>Our Process</li>
    <li>Our History</li>
    <li>Blog</li>
    <li>Glossary</li>
    <li>Contact</li>
    </ul>
    </div>
    </div>
    <div class="col-md-8">
    <h2 style="font-size:20px;color:#2c4276;"><?php the_title();?></h2>
    <div  style="color:#a2a2a2;font-size:18px;">
    <?php 
if ( have_posts() ) {
    while ( have_posts() ) {
        the_post(); 
        the_content();
    } // end while
} // end if
?>
</div>
    </div>
    </div>

Answer 1

你可以通过多种方式先在你的自定义中实现css .no-gutter{padding:0!important; margin:0!important;} 添加这些行然后在你的 html <div class="col-md-4 no-gutter">.

现在您可以在不需要 bootstrap 填充的地方使用 no-gutter。

对于 ul #innernav ul{padding-left:0px;}

Answer 2

您必须在 col-md-4 和 <ul> 上删除填充：

<div class="col-md-4" style="padding-left: 0px;"> // here padding taken out
    <div id="innernav">
        <ul style="padding-left: 0px;"> // here padding taken out
            <li>Our Purpose</li>
            <li>Why Choose PSP</li>
            <li>Our Process</li>
            <li>Our History</li>
            <li>Blog</li>
            <li>Glossary</li>
            <li>Contact</li>
        </ul>
    </div>
</div>

Answer 3

您需要从菜单周围的元素中删除一些填充。

我建议用 left-container 的 class（或类似的东西）来包装此部分，并在 innernav 中添加 class。类在样式方面比 ID 更好。

<div class="left-container">
  <div class="col-md-4">
    <div id="innernav" class="innernav">
      <ul>
        <li>Our Purpose</li>
        <li>Why Choose PSP</li>
        <li>Our Process</li>
        <li>Our History</li>
        <li>Blog</li>
        <li>Glossary</li>
        <li>Contact</li>
      </ul>
    </div>
  </div>
</div>

然后，您可以使用 CSS 删除填充，您的菜单将对齐。

.left-container > .col-md-4,
.left-container .innernav ul {
  padding-left:0;
}

无法获取 Bootstrap 布局上的列内容以与列左侧对齐

Can't Get Content of Column on Bootstrap Layout to Align to Left of Column

html

css

php

wordpress

twitter-bootstrap