Question

我的页面上有一个标题，而且我一直试图将内容集中在一起，但一直没有成功。

我尝试过使用偏移量，使用保证金以及其他一些东西，但我无法让它移动。

我不希望实际文本居中，所以text-align：center赢了。如果有意义，我只想将整个内容集中在一起。和帮助将不胜感激！

我的HTML看起来像这样

<div class="container">
        <header class="header-wrapper">
            <div class="sticky-header">
                <div class="row">
                        <div class="col-md-4">
                        <div class="form-group">
                            <label class="bold">Customer Name: </label>
                            <label>Person!! </label>
                        </div>
                        <div class="form-group">
                            <label class="bold">Address: </label>
                            <label>101 Main Street </label>
                        </div>

                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="bold">Email:</label>
                            <label>something@email.com </label>
                        </div>
                        <div class="form-group">
                            <label class="bold">City, State:</label>
                            <label>Tavierner, FL </label>
                        </div>

                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="bold">Phone:</label>
                            <label>555-555-5555 </label>
                        </div>

                        <div class="form-group">
                            <label class="bold">Club Code:</label>
                            <label>456 </label>
                            <label class="bold">Associate#:</label>
                            <label>45 </label>
                        </div>
                    </div>
                </div>
            </div>
        </header>
</div>

我的css看起来像这样

.header-wrapper {
    background: transparent;
    color: transparent;
    height: 0;
}

.sticky-header {
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    position: static;
    top: -100px;
    padding: 10px;
    //text-align: center;
}

.sticky-header.sticky {
    background: #f9f8f0;
    position: fixed;
    top: 0;
    left: 0;
    height: auto;
    width: 100%;
    z-index: 999;
    color: #000;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
}

.sticky-header .form-group, .sticky-header label, #cts-ers .form-group{
    margin:0;
}

https://www.bootply.com/edHiY15iJy

Answer 1

要解决这个问题，您应该在db { default = ${slick.dbs.postgres.db} default.migration.locations=["common","postgres"] } slick { dbs { postgres { driver = "slick.driver.PostgresDriver$" db { profile = org.postgresql.Driver driver = ${slick.dbs.postgres.db.profile} // required for Flyway url = "jdbc:postgresql://localhost:5432/"${db-name} user = ${db-user} password = ${db-password} connectionPool = disabled keepAliveConnection = true autoCommit = false } } } } div内添加col-md-4 inline-block，然后再将text-align:left添加到您的列中。

我已调整您的代码：
HTML：

<div class="container">
        <header class="header-wrapper">
            <div class="sticky-header">
                <div class="row">
                     <div class="col-md-4 text-center">
                        <div class="helper">
                          <div class="form-group">
                              <label class="bold">Customer Name: </label>
                              <label>Person!! </label>
                          </div>
                          <div class="form-group">
                              <label class="bold">Address: </label>
                              <label>101 Main Street </label>
                          </div>
                        </div>      
                    </div>

                    <div class="col-md-4 text-center">
                      <div class="helper">
                        <div class="form-group">
                            <label class="bold">Email:</label>
                            <label>something@email.com </label>
                        </div>
                        <div class="form-group">
                            <label class="bold">City, State:</label>
                            <label>Tavierner, FL </label>
                        </div>
                        </div>
                    </div>
                    <div class="col-md-4 text-center">
                      <div class="helper">
                        <div class="form-group">
                            <label class="bold">Phone:</label>
                            <label>555-555-5555 </label>
                        </div>

                        <div class="form-group">
                            <label class="bold">Club Code:</label>
                            <label>456 </label>
                            <label class="bold">Associate#:</label>
                            <label>45 </label>
                        </div>
                       </div>
                    </div>
                </div>
            </div>
        </header>
  <section>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>

  </section>
</div>

CSS：

.header-wrapper {
    background: transparent;
    color: transparent;
    height: 0;
}

.sticky-header {
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    position: static;
    top: -100px;
    padding: 10px;
    //text-align: center;
}

.sticky-header.sticky {
    background: #f9f8f0;
    position: fixed;
    top: 0;
    left: 0;
    height: auto;
    width: 100%;
    z-index: 999;
    color: #000;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
}

.sticky-header .form-group, .sticky-header label, #cts-ers .form-group{
    margin:0;
}

.helper {
    display: inline-block;
    text-align: left;
}

还可以使用工作解决方案https://www.bootply.com/z3icKH1iSD

Answer 2

如果我理解正确 - 您希望.sticky-header内的内容占据总宽度的较小者。实现这一目标的最简单方法是，正如您在初始帖子中推测的那样，通过使用抵消。

更改.sticky-header的列以使用：

<div class="col-md-3">

第一列添加col-md-offset-2。

中心Bootstrap列

2 个答案: