Question

我试图使用bootstrap创建一个永久的固定侧边栏（3）。它目前看起来像这样：

它的代码是：

<div class="main container">
            <div class="row">
                <div class="col-lg-2 sidebar">
                    <div class="affix">
                        <p class="name-header">FIRST LAST</p>
                        <hr>
                        <nav>
                            <ul>
                                <li>About</li>
                                <li>Projects</li>
                                <li>Interests</li>
                                <li>Photography</li>
                                <li>Contact</li>
                            </ul>
                        </nav>
                    </div>

                </div>
                <div class="col-lg-8 col-lg-offset-1 main-content-wrapper">
                    <div class="content">
                        <div class="about section">
                            <h3>About</h3>
                            ...

我想将文字居中对齐＆＃34;最后一次＆＃34;到侧栏，但它的中心与词缀div对齐。如何使贴图div跨越侧边栏的整个宽度（col-lg-2），或者更确切地说，如何将文本居中对齐侧边栏而不是贴上div？

Answer 1

解决方案1：

增加<div class="col-lg-12 sidebar">中的col-value并给出＆＃34; text-align:center;＆＃34;上课。

解决方案2：

您可以添加"col-lg-offset-1"（偏移值可能会根据您的要求更改）类来推送列。或者您可以添加以下类和滑动条。

sidebar {
    height:200px;
    border: 5px solid black;
    display:block;
    margin: auto;
    width: 300px;
}

Answer 2

请将词缀div作为“位置”并使其相对，或者为其分配保证金或填充。

Answer 3

将text-center课程添加到包含FIRST LAST文字

的p标签中

＆＃13;

.sidebar {
  background-color: black;
  color: white;
  height: 100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-2">
  <div class="affix sidebar">
    <p class="name-header text-center">FIRST LAST</p>
    <hr>
    <nav>
      <ul>
        <li>About</li>
        <li>Projects</li>
        <li>Interests</li>
        <li>Photography</li>
        <li>Contact</li>
      </ul>
    </nav>
  </div>

</div>
<div class="col-lg-8 col-lg-offset-1 main-content-wrapper">
&nbsp;
</div>
</div>

＆＃13;

Answer 4

使用此代码：

.affix{
margin: 0 auto;
text-align:center;
width:100%
}

中心在引导程序中的内容div中对齐内容？

4 个答案: