Question

嘿，我有以下HTML代码：

<div class='col-sm-7 foo'>...</div>
<div class='col-sm-5 foo'>...</div>

和我的css：

.foo {
   background-color: white;
}

我不能在它们之间添加一些余量，因为它们由于引导而占据了整个宽度。虽然我想在它们之间添加一个分隔符（10px左右）而没有背景颜色。我怎样才能做到这一点（我必须出于其他原因使用bootstrap）。

Answer 1

您可以编辑col边距的对齐方式，并使用填充来偏移：

THIS

final Dialog dialog = new Dialog(context);
                dialog.setContentView(R.layout.custom);
                dialog.setTitle("Title...");

                // set the custom dialog components - text, image and button
                TextView text = (TextView) dialog.findViewById(R.id.text);
                text.setText("Android custom dialog example!");
                ImageView image = (ImageView) dialog.findViewById(R.id.image);
                image.setImageResource(R.drawable.ic_launcher); //line 115

                Button dialogButton = (Button) dialog.findViewById(R.id.dialogButtonOK);
                // if button is clicked, close the custom dialog
                dialogButton.setOnClickListener(new OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        dialog.dismiss();
                    }
                });

                dialog.show();

Answer 2

添加另一个div宽度，col大小为1，宽度为10px，没有背景。根据需要更改其他列的宽度。

Answer 3

默认情况下，Bootstrap列有15px填充，所以你可以将foo类包装在一列中吗？例如：

<div class="col-sm-7">
   <div class="foo"></div>
</div>
<div class="col-sm-5">
   <div class="foo"></div>
</div>

然后你的foo div有白色背景和15px的填充（没有背景颜色）。

http://jsfiddle.net/3cz3zy3k/

Answer 4

只需将背景颜色放在列的子项而不是列本身上。根据我的经验，最好避免修改网格元素。

.foo {
    background-color: pink;
}

<div class="container-fluid">
    <div class="row">
        <div class='col-xs-7'><div class='foo'>...</div></div>
        <div class='col-xs-5'><div class='foo'>...</div></div>
    </div>
</div>

<强> Demo

有两列采用全宽但带有分隔符

4 个答案:

THIS