Question

我想把一个容器放在一个容器内部，但我不能让它工作

/* 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>

在上面的代码片段中，如何使用按钮确保容器流体的文本居中？

Answer 1

依靠flexbox，因为它是引导程序的V4。只需将d-flex flex-column添加到container-fluid。

我还删除了一些无用的类并更正了其中的一些（V4中不再有col-xs-*）

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

集装箱液体中心容器

1 个答案: