css - 创建模式的布局和样式

Question

我正在尝试创建这样一个模态的设计。

因此，我首先通过选择我喜欢的元素来创建布局。但是我有一个问题是如何创建这样的行？我是否创建了一个假的 div，这样线条就不会到达那里？

线条

HTML

    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  New entry
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <span class="tc">New Note</span>
        <button type="button" class="close" data-dismiss="modal">Add</button>
      </div>
      <div class="modal-body">
        <div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Note
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Image
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Voice
  </label>
   <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Video
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Data
  </label>
</div>
      </div>
      <div class="modal-footer">
      <div class="input-group">
  <span class="input-group-addon">Episode:</span>
  <input type="text" class="form-control" placeholder="Choose a episode">
  <span class="input-group-btn">
        <button class="btn btn-default" type="button">Info</button>
      </span>
</div>

<div class="input-group">
  <span class="input-group-addon">Episode:</span>
  <input type="text" class="form-control" placeholder="Choose a episode">
  <span class="input-group-btn">
        <button class="btn btn-default" type="button">Info</button>
      </span>
</div>
<div class="input-group">
  <input type="text" class="form-control" placeholder="Write here">
</div>


      </div>
    </div>
  </div>
</div>

CSS

.tc{
margin-left:192px;}

感谢您抽出宝贵时间!

Answer 1

如果我完全理解，如果我错了请纠正我，你想要这样的东西:

http://jsfiddle.net/VDesign/9cuxr59y/

CSS 代码

.tc{
margin-left:192px;}

.input-group-addon {
    background-color: #fff;
    border: none;
    border-radius: none;
}

.form-control, .form-control:focus {
    background-color: #fff;
    box-shadow: none;
    border: none;
}

.input-group + .input-group {
    border-top: 1px solid #ccc;    
}

.input-group {
    width: 100%;
    padding: 7px;
}

.btn-default {
    border-radius: 100%;
    color: #3071A9;
    border: 1px solid #3071A9;
}

.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group > .btn, .input-group-btn:last-child > .dropdown-toggle, .input-group-btn:first-child > .btn:not(:first-child), .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
    border-bottom-left-radius: 100%;
    border-top-left-radius: 100%;
}

.input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {
    margin-left: 0;
}