代码之家 › 专栏 › 技术社区 › Sireini

容器流体中的中心容器

bootstrap-4 css html

Sireini · 技术社区 · 6 年前

我想把容器放在容器液体的中心,但我不能让它工作

/* Setup Buttons Sepcific Styling */
.setup-bg {
  background: url("https://image.ibb.co/geAGqy/setupbtns_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  height: 550px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="container-fluid setup-bg my-auto">
        <div class="container my-auto">
            <h3 class="h3 white my-5 text-center justify-content-center">
                A simple tool for you to create your own social share bar.
                <br> Click the social media icons to add them to your bar</h3>
            <div class="row button-row justify-content-center">
                <div class="col-xs-4 col-sm-3 col-md-1">
                    <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_facebook-btn" width="150"></a>
                        <input type="checkbox" name="facebook" value="facebook">
                    </label>
                </div>
                <div class="col-xs-4 col-sm-3 col-md-1">
                    <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_linkedin-btn" width="150"></a>
                        <input type="checkbox" name="linkedin" value="linkedin">
                    </label>
                </div>
                <div class="col-xs-4 col-sm-3 col-md-1">
                    <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_twitter-btn" width="150"></a>
                        <input type="checkbox" name="twitter" value="twitter">
                    </label>
                </div>
                <div class="col-xs-4 col-sm-3 col-md-1">
                    <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_pocket-btn" width="150"></a>
                        <input type="checkbox" name="pocket" value="pocket">
                    </label>
                </div>
                <div class="col-xs-4 col-sm-3 col-md-1">
                    <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_copy-btn" width="150"></a>
                        <input type="checkbox" name="copy" value="copy">
                    </label>
                </div>
            </div>
            <div class="row text-center my-5">
                <div class="col-12">
                    <button class="btn btn-primary fs_btn-primary" data-toggle="modal" data-target="#exampleModal" onclick="getShareButtonsCode()">Setup social share buttons</button>
                </div>
            </div>
        </div>
    </div>

在代码片段的上方,我如何用按钮将文本居中插入容器流体?

1 回复 | 直到 6 年前

Temani Afif 6 年前

依靠 flexbox 因为它是引导程序的v4版本。简单地添加 d-flex flex-column 到 container-fluid .

我还删除了一些usless类并更正了其中一些(不再有 col-xs-* 在v4中)

/* Setup Buttons Sepcific Styling */

.setup-bg {
  background: url("https://image.ibb.co/geAGqy/setupbtns_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  height: 550px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="container-fluid setup-bg d-flex flex-column">
  <div class="container my-auto">
    <h3 class="h3 white my-5 text-center">
      A simple tool for you to create your own social share bar.
      <br> Click the social media icons to add them to your bar</h3>
    <div class="row button-row justify-content-center text-center">
      <div class="col-4 col-sm-3 col-md-1">
        <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_facebook-btn" width="150"></a>
                        <input type="checkbox" name="facebook" value="facebook">
                    </label>
      </div>
      <div class="col-4 col-sm-3 col-md-1">
        <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_linkedin-btn" width="150"></a>
                        <input type="checkbox" name="linkedin" value="linkedin">
                    </label>
      </div>
      <div class="col-4 col-sm-3 col-md-1">
        <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_twitter-btn" width="150"></a>
                        <input type="checkbox" name="twitter" value="twitter">
                    </label>
      </div>
      <div class="col-4 col-sm-3 col-md-1">
        <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_pocket-btn" width="150"></a>
                        <input type="checkbox" name="pocket" value="pocket">
                    </label>
      </div>
      <div class="col-4 col-sm-3 col-md-1">
        <label class="image-checkbox">
                        <a class="htmlShareBtns selectBox" id="html_fs_copy-btn" width="150"></a>
                        <input type="checkbox" name="copy" value="copy">
                    </label>
      </div>
    </div>
    <div class="row text-center my-5">
      <div class="col-12">
        <button class="btn btn-primary fs_btn-primary" data-toggle="modal" data-target="#exampleModal" onclick="getShareButtonsCode()">Setup social share buttons</button>
      </div>
    </div>
  </div>
</div>