Question

CSHTML：

<div class="row">
    <div class="col-lg-4 box">
        <h2>Test1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p><input type="button" class="btn btn-default" value="Create &raquo" onclick="location.href='@Url.Action("Create", "Test1", new { area = ""})'" /></p>
    </div><!-- /.col-lg-4 -->
    <div class="col-lg-4 box">
        <h2>Test2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p><input type="button" class="btn btn-default" value="Create &raquo" onclick="location.href='@Url.Action("Create", "Test2", new { area = ""})'" /></p>
    </div><!-- /.col-lg-4 -->
    <div class="col-lg-4 box">
        <h2>Test3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p><input type="button" class="btn btn-default" value="Create &raquo" onclick="location.href='@Url.Action("Create", "Test3", new { area = ""})'" /></p>
    </div><!-- /.col-lg-4 -->
</div><!-- /.row -->

CSS：

.box{
    border: 2px solid black;
}

Bootply

如何在这3个div之间创建相等的空间并使其保持居中？这位于我的carousel下面。

感谢任何帮助

Answer 1

我会在父.row上使用弹性框。

＆＃13;

.box{
  border: 2px solid black;
  flex:1;
}
.box:nth-of-type(2) {
  margin:0px 10px 0px 10px;
}

.row{
  display:flex;
  width:100%;
}

＆＃13;

<div class="row">
  <div class="box">
    <h2>Test1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p><input type="button" class="btn btn-default" value="Create »" onclick="location.href='@Url.Action(" create",="" "test1",="" new="" {="" area="" })'"=""></p>
  </div><!-- /.col-lg-4 -->
  <div class="box">
    <h2>Test2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p><input type="button" class="btn btn-default" value="Create »" onclick="location.href='@Url.Action(" create",="" "test2",="" new="" {="" area="" })'"=""></p>
  </div><!-- /.col-lg-4 -->
  <div class="box">
    <h2>Test3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p><input type="button" class="btn btn-default" value="Create »" onclick="location.href='@Url.Action(" create",="" "test3",="" new="" {="" area="" })'"=""></p>
  </div><!-- /.col-lg-4 -->
</div><!-- /.row -->

＆＃13;

Answer 2

仅使用Bootstrap脚手架类，这不是太棘手 - 您只需要开始使用嵌套列，并将偏移类应用于连续列。例如：

.box {
  border: 2px solid black;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-lg-4">
    <div class="row">
      <div class="col-lg-10 box">
        <h2>Test1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>
          <input type="button" class="btn btn-default" value="Create »" onclick="location.href='@Url.Action(" create ",=" " "test1 ",=" " new=" " {=" " area=" " })'"="">
        </p>
      </div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="row">
      <div class="col-lg-10 col-lg-offset-1 box">
        <h2>Test2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>
          <input type="button" class="btn btn-default" value="Create »" onclick="location.href='@Url.Action(" create ",=" " "test1 ",=" " new=" " {=" " area=" " })'"="">
        </p>
      </div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="row">
      <div class="col-lg-10 col-lg-offset-2 box">
        <h2>Test3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>
          <input type="button" class="btn btn-default" value="Create »" onclick="location.href='@Url.Action(" create ",=" " "test1 ",=" " new=" " {=" " area=" " })'"="">
        </p>
      </div>
    </div>
  </div>
</div>

希望这有帮助！如果您有任何问题，请告诉我。

（请注意，您必须将代码段扩展为全屏才能看到它正常工作，否则它将使用移动媒体查询。）

Bootstrap列元素之间的空间相等

2 个答案: