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

引导4切换的水平对齐失败

material-design-lite material-design twitter-bootstrap css

tealowpillow · 技术社区 · 7 年前

注意,“float right”类对于引导元素(button)工作得很好。我还尝试将“text right”类应用于容器,以及justify content end、justify content:flex end、pull right等。。。什么都不管用。

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" />

<body>
  <div class="container">
    <div class="row">
      <div class="col-8">Text row 1</div>
      <div class="col-4 float-right">
        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect float-right" for="switch-1">
            <input type="checkbox" id="switch-1" class="mdl-switch__input float-right" checked>
          </label>
      </div>
    </div>
    <div class="row">
      <div class="col-8">Text row 2</div>
      <div class="col-4 float-right">
        <button type="button" class="btn btn-primary float-right">Submit</button>
      </div>
    </div>
  </div>
  </div>
</body>

1 回复 | 直到 7 年前

miken32 Amit D 7 年前

使用CSS规则,您可以将其移到右侧。因为它是浮动的,所以你需要用填充物来调整它。另一种选择是将控件置于 div.col-1 给他们更少的活动空间。

label.mdl-switch { width: auto !important; }

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" />

<body>
  <div class="container">
    <div class="row">
      <div class="col-8">Text row 1</div>
      <div class="col-4 float-right">
        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect float-right" for="switch-1">
            <input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
          </label>
      </div>
    </div>
    <div class="row">
      <div class="col-8">Text row 2</div>
      <div class="col-4 float-right">
        <button type="button" class="btn btn-primary float-right">Submit</button>
      </div>
    </div>
  </div>
</body>

推荐文章

xajetin · 导航不更改滚动上的颜色

3 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

3 年前

Bryan Santos · 固定表头与引导

3 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

3 年前

tym · 根据用户偏好显示字段

3 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

3 年前

Pavel · 当验证DIV可见时,引导网格会移动

7 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

7 年前

Alexander David · 折叠卡打开,然后立即再次关闭

7 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

7 年前