标签: bootstrap-4

在Bootstrap 3,我可以随意应用和调整表格列中col-sm-xx的th标签thead.但是这在bootstrap 4中不起作用.如何在bootstrap 4中实现这样的功能？

<thead>
<th class="col-sm-3">3 columns wide</th>
<th class="col-sm-5">5 columns wide</th>
<th class="col-sm-4">4 columns wide</th>
</thead>

查看codeply,前提是它的大小不正确,特别是如果向表中添加一些数据.看看它是如何运行的:

<div class="container" style="border: 1px solid black;">
    <table class="table table-bordered">
    <thead>
        <tr class="row">
            <th class="col-sm-3">3 columns wide</th>
            <th class="col-sm-5">5 columns wide</th>
            <th class="col-sm-4">4 columns wide</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>123</td>
            <td>456</td>
            <td>789</td>
        </tr>
    </tbody>
</table>
</div>

我目前有类似的东西:

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

现在假设,content是不同高度的盒子,具有相同的宽度 - 我怎么能保持相同的"基于网格的布局",并且所有盒子彼此排列,而不是完美的线条.

目前TWBS将下一行col-md-4置于前三行中最长元素下面,因此每行项目完全对齐干净 - 虽然这很棒但我希望每个项目直接落在最后一个元素下("砌体"布局) )

我需要帮助来解决问题,我需要将内容集中在bootstrap4中的列中,请在下面找到我的代码

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3">
        <div class="nauk-info-connections">
        </div>
     </div>
</div>

默认的Bootstrap网格系统使用12列,每个跨度具有30px如下所示的装订线.排水沟是列之间的空白区域.排水沟宽度似乎介于20px- 30px.我们假设它在30px这里.

我想删除特定的装订线空间div,以便排中没有排水沟空间.每个跨度将彼此相邻,没有排水沟.

问题是如果我删除30px它在行尾留下的边距(沟槽)360px(12*30px).

鉴于我只想删除特定的天沟空间div.让我们假设它是在divs中的s main_content div.

div#main_content div{
  /*
 no gutter for the divs in main_content
 */
}

如何在div不失去Bootstrap响应性且不在行尾留空间的情况下删除特定的装订线？

我有3列,我想在桌面和移动设备上以不同的方式订购.目前,我的网格看起来像这样:

<div class="row">
  <div class="col-xs-3 col-md-6">
    1
  </div>
  <div class="col-xs-3 col-md-6">
    2
  </div>
  <div class="col-xs-6 col-md-12">
    3
  </div>
</div>

在移动视图中,我想要输出以下内容:

1-3-2

不幸的是,我没有得到如何使用Bootstrap 4中的.col-md-push-*和.col-md-pull-*类来解决这个问题.

我正在用HTML5和Bootstrap 4编写一个网站,我试图将一个方形图像变成一个圆圈.在Bootstrap 3中,这很容易实现.img-circle,但现在我似乎无法使其工作,我无法在线找到任何答案.Bootstrap是否已经删除了img-circle类或者我的代码搞砸了？

它是这样的:

<!-- Within a tab-content div --> 
<div class="col-xs-7">
    <img src="img/gallery2.JPG" class="img-circle" alt="HelPic>
</div>

希望有人可以帮助我:)

我尝试安装bootstrap 4,并包含以下链接

<script src="libs/jquery/dist/jquery.min.js"></script>
<script src="libs/tether/dist/js/tether.min.js" ></script>
<script src="libs/popper.js/dist/popper.js"></script>
<script src="libs/bootstrap/dist/js/bootstrap.min.js" ></script>

但发生以下错误:

未捕获的syntaxError:意外的令牌导出

任何想法如何解决它？

我老了,所以我将源代码下载到1.12.0然后执行以下操作:

<script src="/popper.js-1.12.0/dist/popper.js"></script>
<script src="/bootstrap-4.0.0-beta/dist/js/bootstrap.js"></script>

但是我得到了:

Uncaught SyntaxError: Unexpected token export

在线2294说:

export default Popper;

是否可以更改引导原色以匹配品牌颜色？在我的案例中,我使用的是bootswatch的纸质主题.

<div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-8">
                <div v-for="job in job">


                    <div class="text-center">
                        <h1>{{ job.job_title }}</h1>
                        <p><strong>Google Inc. </strong> - {{ job.location }}</p>
                        <h2><u>Job Description</u></h2>
                    </div>

                    <p v-html="desc"></p>

                    <p class="text-center">Posted: {{ formatDate(job.date_created) }}</p>
                    <button v-on:click="applyResume()" id="apply-btn" class="btn btn-primary">{{ buttonText }}</button>

                </div>

            </div>
            <div class="hidden-sm-down col-md-4"></div>


        </div>  

无法弄清楚如何居中这个按钮.在BS 3中,我只使用中心块,但这不是BS4中的选项.有什么建议？